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.

 caramelleamare, N.D.

Ti consiglio di leggere questa guida, ci sono molti esempi: http://css.html.it/guide/lezione/50/introduzione/

 Gian Paolo, N.D.

..Ma non questa soluzione che cercavo!
Cmq ci sono riuscito, ma non é stao cosi semplice perche ogni volta ne veniva fuori una diversa.
Ti posto il codice funzionante per come lo volevo io, magari serve a qualcuno:


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.

 caramelleamare, N.D.

Scusa, a questo punto posta anche il codice html, div ecc.
Se non inserisci il punto di inserimento dei DIV questo foglio di stile non servirà a nessuno. Oltretutto, per assicurarti la compatibilità per tutti i browser, un buon foglio di stile inzia sempre con:
html,body{
margin: 0;
padding:0;
}
Altro che non ti serve il manuale...

 Gian Paolo, N.D.

Non mi pare di aver detto che non mi serve il manuale.
Io non so che casino ho fatto per arrivare al codice che ho postato sopra. Adesso pero sono riuscito a farlo come si deve, credo.
E' tutto molto piu semplice e pulito, e non ha due problemi di funzionamento di quello sopra dovuti alla position:absoute.

html, body {
margin:0;
padding:0;
}
#contenitore {
max-width:900px;
margin:0 auto;
}
#testata {
height:100px;
margin-bottom:50px;
background-color: #f2f5c6;
}
#sinistro {
float: left;
width: 47%;
margin-bottom: 30px;
margin-right: 6%;
}
#destro {
float: left;
width: 47%;
margin-bottom: 30px;
}
#sotto {
clear: both;
height: 30px;
background-color: #3CC;
}

--------- HTML ---------

<body>

<div id="contenitore">
<div id="testata"></div>

<div id="sinistro">TESTO</div>
<div id="destro">TESTO</div>

<div id="sotto"></div>

</div>
</body>

Dovrebbe essere tutto adesso.
Questo era esattamente quello che volevo come funzionamento.
Io credo d'essermi inceppato perche quando impostavo la max-width al div destro succedeva che, restringendo la pagina, lo stesso div destro prima di iniziare ad adattare il suo contenuto alle nuove dimensioni, scattava sotto al div sinistro. Per questo ho messo la position:absolute e di li tutta una serie di cose in piu per rattoppare le falle.
Se ci sono ulteriori correzioni da fare a questo codice dimmi pure, cosi prendo appunti!

P.S. avevo pensato di usare max-width, perche avendo dpprima impostato una misura in px nel div sinistro, con la percentuale nel destro non ero sicuro di arrivare al margine esatto della pagina.

 caramelleamare, 23 Aug 2013

Va bene, con i float a sinistra e a destra e il clear boat sul footer è il modo corretto di procedere ;-)

 Gian Paolo, N.D.

Quindi mi confermi che per avere tutto fluido(ho provatoanche a fare tre colonne) é condizione 'sine qua non' che tutte le widths siano impostate in percentuale e mai in px? Difatti é bastato che nella terza colonna inserissi la width in px perche mantenesse la fluidità, ma scattando sotto agli altri al momento del ridimensionamento della pagina.
Un'altra cosa: la grandezza in em so che é proporzionale, ma da gli stessi risultati della percentuale?
1 em quanti px sono? Si possono inserire decimali tipo 1,3 em? Faccio per parlare eh, lo so che trovo tutti in rete senza problemi.

 caramelleamare, N.D.

La questione degli em è da studiare a parte... non hanno necessariamente una corrispondenza in pixel... di solito si usano per i siti elastici, sui font e sui padding. La guida che ti ho segnalato, se la leggi, ti spiega come e quando usare l'una o l'altra unità di misura.

 Gian Paolo, N.D.
001design.it ® è un marchio registrato.
© 2004-2017 Molfese Paolo - P.Iva: 03430820617 - All rights reserved | Tutti i diritti sono riservati.