Layout fluido a tre colonne

[irdg]

ciao a tutti...

ho realizzato un layout fluido a tre colonne... il codice è il seguente:

<div id="contenitore">
   <div id="testa"></div>
   <div id="corpo">
      <div id="centro">centro</div>
      <div id="sinistra"></div>
      <div id="destra"></div>
      <br class="clear" />
   </div>
   <div id="footer"></div>
</div>

mentre il CSS è:

.clear{clear:both;}
#contenitore{width:95%;margin:10px auto;min-width:400px;max-width:1170px;}
	#testa{height:100px;margin-bottom:10px;border:1px solid #990033;}
	#corpo{width:100%;position:relative;}
		#centro{width:48%;margin:0 auto;}
		#sinistra{width:24%;position:absolute;left:0;top:0;}
		#destra{width:24%;position:absolute;right:0;top:0;}
	#footer{width:100%;}

il problema riscontrato è che, al crescere del div "sinistra", "corpo" rimane della stessa altezza di "centro", quindi "sinistra" si sovrappone a "footer".

qualche santo protettore dei CSS può darmi una mano?

è possibile fare in modo che sinistra (ma anche destra), pur essendo absolute rimangano nel flusso e vangano influenzati dal clear dentro corpo?

grazie a tutti e ciao

[Noodle]

Mhhhh... la proprietà clear funziona con gli elementi "floattanti" ossia con una proprietà float specificata.
Ex.:

#elemento1 {
float:left;
}
#elemento2{
clear:left;
}

e non con div posizionati tramite position: absolute.

Personalmente, ti consiglio di abbandonare il posizionamento assoluto per passare ai float che, anche se un pò complessi all'inizio, rendono molto meglio.

[irdg]

in orgine avevo utilizzato i div flottati, ma con il layout fluido da alcuni probemi:

se li flotto tutti e tre a sinistra fa casino con gli arrotondamenti (normalmente ignorabili, ma con IE6 a volte l'ultimo va a capo)

avevo provato con div centrale centrato, e poi inserire gli altri 2 flottati, ma ma stanno sotto il div centrale

savevo provato la tecnica del wrapper (un float left e un float right, uno dei due con dentro un float left e uno right), ma non c'è versi di trovare una combinazione che renda i due float esterni uguali.

alla fine avev trovato questa che rendeva benissimo... fino a che non mi è venuta l'idea di mettere un footer...

al momento stò valutando di utilizzare javascript per calcolare l'altezza dei tre div e impostare il div contenutore pari all'altezza del più alto dei tre... ma prima speravo ci fosse una soluzione con solo CSS

speravo ci fosse un qualcosa che fa si che il div, anche se absolute, venisse riconosciuto dal padre come parte del flusso...

Un dettaglio:
a quello che sapevo il clear è una proprietà che impone all'elemento su cui è piazzato che nessun elemento possa stare alla sua destra o/e alla sua sinistra (in base a come è settato) ripristinando il normale flusso dei dati

poi di fatto viene utilizzato solo con i float, ma vista la definizione speravo che potessa fare qualcosa anche con i position (dato che, come i float, escono dal normale flusso)

[Noodle]

Scusa se sono un pò duro di comprendonio ma non capisco il problema...

<div id="contenitore">
	<div id="header"></div>
	<div id="corpo">
		<div id="colonna1"></div>
		<div id="colonna2"></div>
		<div id="colonna3"></div>
	</div>
	<div id="footer></div>
</div>

Preso questo codice allora:

#contenitore {margin:0 auto;width:1000px;}
	#corpo {float:left;}
		#colonna1 {float:left;width:20%;}
		#colonna2 {float:left;width:60%;}
		#colonna3 {width: 20%;margin-left: 80%;}
	#footer {clear:both;}

Ora...puoi usare il sistema width/margin-left o anche flottare semplicemente a sinistra #colonna3 visto che tanto #corpo flotta, ed elementi flottanti dentro contenitori flottanti (come le colonne in corpo) fanno allargare il contenitore (corpo) come se seguissero il normale flusso del documento.
Anzi anzi, teoricamente non c'è nemmeno bisogno di #corpo... è solo per "comodità".

Edit: e volendo essere pignoli per il footer basterebbe clear:left ... ma non si sa mai

[Mich_]

Mi permetto di aggiungere alcuni commenti e aggiunte al CSS di Noodle

#contenitore {
  margin:0 auto;
  /*width:1000px;           /* e` un po' troppo: non tutti hanno schermi giganti, e molti di questi navigano in finestre */
}

#corpo {
  float: left;                /* e` una tecnica possibile (float almost everything */
  width: 100%;          /* e` necessario, altrimenti le larghezze in % definite sotto nonhanno senso */
}

#colonna1 {
  float: left;
  width: 20%;          
}
#colonna2 {
  float:left;
  width:60%;
}
#colonna3 {
  width: 19.5%;     /* La somma non deve fare 100% perche`, complici gli arrotondamenti,
                             in qualche brwoser si avrebbe una somma superiore al 100% */
  /* margin-left: 80%;   /* non mi piace. Preferisco un bel float anche qui */
  float: left;
}
#footer {
  clear:both;
  width: 90%;     /* o comunque un valore che impedisca di mettersi alla pari di altro blocco del pezzo superiore */
}

[Noodle]

Concordo con le modifiche
Il 1000px l'ho definito così per fare calcoli tondi, ma di solito è buono usare in totale 960px (o giù di lì, ognuno fa come vuole).