Problema con CSS fluido

caramelleamare

Problema con CSS fluido

Ciao a tutti, dopo circa 11 ore di prove ci rinuncio, anche perche in rete non ho trovato suggerimenti che fanno al caso mio:
Sarà una cosa da niente ma io non riesco a fare questo: un DIV contenitore di 900px, che stia al centro del body. Al suo interno una TESTATA fluida di 900px anch'essa, e sotto DUE DIV affiancati ed ENTRAMBI FLUIDI.
Questo è quello che sono arrivato a scrivere:


body{
    margin:0;
    padding:0 25% 0 25%;
}
#contenitore {
    width:100%;
    margin: 0 auto;
}
#testata {
    background-color:#399;
    height:150px;
}
#sinistro {
    float:left;
    border-right-color:#39F;
    border-right-style:double;
    padding-right:15px;
    padding-top:10px;
}
#destro {
    margin-left:150px;
    padding-top:10px;
    padding-left:10px;
    border-right-color:#39F;
    border-right-style:double;
    border-left-color:#39F;
    border-left-style:double;
}

Ho messo i bordi per vedre bene inizio e fine dei div.
Quello che ho notato è che il float sul detsro gli toglie la fluidità, cioè scatta sotto al sinistro prima di iniziare ad adattare il contenuto.
Se non metto il float pero il destro si sovrappone al sinistro e devo regolarmi con il margine (150 px), il che implica un div destro a larghezza fissa.
Poi: non sono riuscito nemmeno a impostare i 900px di larghezza del contenitore, ma ho dovuto aggieggiare a occhio sul padding del body!
Insomma un gran casino e non ho risolto, se qualcuno sa come fare lo ringrazio molto.
Ci dev'essere qualche meccanismo che mi sfugge.

sandroid

Ciao caramelleamare, se vuoi affiancare due DIV devi dargli rispettivamente float:left; e float:right; (ma andrebbe bene anche lasciare ad entrambi left e regolare i margin) ma soprattutto, se sotto questi due contenitori ce n'è un altro, a questo devi attribuire clear: both; perché vada sotto ai due e non segua più le indicazioni di float.
Spero di esserti stato d'aiuto.
Ciao.

caramelleamare

E' quello che ho fatto come prima cosa, però il mio problema è che facendo cosi, il contenuto testuale del div di destra nel momento in cui restringo la pagina, invece di adattarsi alle dimensioni rimane fermo fin che il div non scatta sotto al sinistro.
Io invece ho bisgono che il contenuto di entrambi i DIV sia fluido.
Adesso provo ad inserire un ulteriore div sotto a quei due per vedere se bloccandoli li cambia qualcosa.

Ma la questione dei 900 px del contenitore centrale come si risolve?
E' giusto e dè l'unica soluzione quella che ho adottato io (padding del 25% sul body)? Mi sembrerebbe strano.

sandroid

Ok prova e fammi sapere.
Per piazzare il div container al centro devi dargli margin left e right: auto; e così a tutti i div che vi sono contenuti (header, maincontent, footer) e di lunghezza 900px.

caramelleamare

Allora, ci sono riuscito, ma non è stao cosi semplice perche ogni volta ne veniva fuori una diversa.
Ti posto il codice funzionante:


body {
    margin:0;
    padding:0;
}
#contenitore { 
    max-width:900px;
    margin:0 auto;
    }
#testata {
    background-image:url(img/logo_presenta.jpg);
    background-repeat:no-repeat;
    height:78px;
    margin-bottom:50px;
    background-color: #f2f5c6;
}
#sinistro {
    float:left;
    width: 16%;
    margin-bottom: 30px;
    text-align:center;
}
#destro {
    float: right;
    max-width: 750px;
    max-height: 200px; 
    margin-bottom: 30px;
    margin-left: 150px;
    position: absolute;
    text-align: justify;
    overflow: hidden;
}
#sotto {
    clear:both;
}

Se lo provi inserendo del del testo nei div vedrai che si posizionano perfettamente.
LA cosa strana è che se tolgo l'absolute al DESTRO, me lo posiziona sotto al sinistro anhe se gli do 20 px di bonus nelle dimensioni.
Con absolute il margine lo calcola a partire dal contenitore e non dal body.
Clear left o right, come avevi detto, da giustamente l ostesso risultato.
sempre sul DESTRO ho sfruttato ancora la max-width, sottraendola al margin-left, cosi mi sono risparmiato di lavorare in percentuale, che risulta meno preciso.
DESTRO: ho poi inserito la max-heigth e l'overflow:hidden per evitare che andasse a sovrapporsi al SOTTO durante il ridimensionamento.
La chiave per il contenitore, la cosa piu importante da capire secondo me, è stata quella di impostare la max-width a 900px, così ho potuto togliere il padding al body e fare un lavoro molo piu preciso.
Sul SINISTRO impostare la larghezza fissa o in percentuale come vedi ora, da lo stesso risultato se lo utilizzi come menu con immagini. Suppongo che se ci metti del testo e lo vuoi fluido sia obbligatorio usare la %.
La presenza del SOTTO non è determinante.

Spero di essere stato chiaro, e grazie per l'aiuto.

sandroid

Si per averlo fluido è necessaria la percentuale anche se come vedi per farlo funzionare bene può darti qualche rogna. Io preferisco la larghezza fissa, ed anche l'absolute a volte può dar fastidio (ma un div absolute non è sempre contenuto in un relative?!)

La presenza del div "sotto" con clear: both; serve eccome (a meno che non sia vuoto), prova ad inserirci del testo senza questo attributo e vedi dove te lo mette

caramelleamare

Sisi certo, io intendevo dire che il div sotto non è determinante per il funzionamento dei due sopra. Il clear serve sicuramente una volta che il div sotto è presente.
Però non ho capito la domanda: un abs è sempre contenuto in un relative, ok, e quindi? Cosa è che non torna in quello che ho detto? Scusa ma sono nuovissimo del settore...
Nel mio caso comunque l'absolute è dentro il contenitore, del quale non ho specificato niente e quindi dovrebbe essere interpretato come STATIC, se non sbaglio.
Riguardo il fluido: è vero che da problemi, cioè ci credo, pero quando si tratta di avere molto testo come in un sito di recensioni di cinema, la possibilità di non far perdere testo al ristringere della finestra diventa irrinunciabile, ti pare? Soprattutto se si tratta di un sito con milioni di utenti e quindi schermi di ogni misura.

sandroid

...e quindi avresti dovuto dare relative al container visto che è il div genitrore che contiene un absolute.
Magari come fai tu funziona uguale ma non so in futuro se apporterai ulteriori modifiche.
Certo fluido o fisso dipende proprio dall'uso che ne fai...per pagine di molto testo sono d'accordo con te.