CSS Layout 3 colonne + footer

[ricman]

Sto cercando di realizzare un layout con Header, 3 colonne e footer.
Avevo pensato ad una cosa del genere (escludo l'header dal codice):

#contenitore {
	height: 300px;
	background-color: #99CC33;
}
#sx {
	float: left;
	background-color: #CC6600;
	width: 150px;
}
#centro {
	float: left;
	background-color: #CCFF00;
	width: 380px;
}
#dx {
	float: left;
	background-color: #FFCC00;
	width: 150px;
}
#footer {
	bottom: 0px;
	height: 45px;
	background-color: #f6f6f6;
	text-align: center;
}

------------------------
<div id="contenitore">
	<div id="sx">sx</div>
	<div id="centro">centro centrocentro </div>
	<div id="dx">dx</div>
</div>
<div id="footer">footer</div>

Però c'è un problema: quando riempio, ad esempio, la colonna centrale con molto testo fino a superare l'altezza del "contenitore" questa si sovrappone sia al contenitore stesso che al footer sottostante (in FireFox).
Dove sbaglio?

[jesus]

prova ad applicare il clear:both al div footer:

/* css */
#footer {
  ...
  clear:both;
}

[ricman]

clear:both;

Grande!! Era proprio quello che mi serviva. Per curiosità, puoi dirmi in due parole cosa fa esattamente il Clear?

[jesus]

Originariamente inviato da ricman
Grande!! Era proprio quello che mi serviva. Per curiosità, puoi dirmi in due parole cosa fa esattamente il Clear?

In pratica ripristina il float: significa che l'elemento successivo all'ultimo float ritorna a capo... detto proprio terra terra

[ricman]

...Era proprio quello che mi serviva.

Invece NO!!
La prima impressione era che andasse bene, ma mi accorgo ora che il footer si posiziona bene (e prima no!!) però si posiziona solo lui. Invece il Contenitore (delle 3 colonne) non si "allunga" insieme alla colonna centrale.
Si può fare qualcosa anche per questo?

(intanto grazie 1000)

[haZe]

Potresti provare a scopiazzare un po' da qua: http://www.fu2k.org/alex/css/layouts...NN4_FMFM.mhtml

o anche qua: http://css-discuss.incutio.com/?page=ThreeColumnLayouts

[andrea.paiola]

già guardato qui? http://www.html.it/layout_css/

[ricman]

già guardato qui? http://www.html.it/layout_css/

Ho guardato tutti i link che mi avete passato ma non riesco a risolvere il mio problema. Infatti neanche lì compare il mio "strano" caso...
Se può servire a capire meglio riporto la foto qui sotto dove si vede che il #contenitore segnato di rosso NON VIENE SPINTO GIU' dalla colonna centrale (quella verde chiaro con scritto "centro centro centro....).

[Lava]

Scusa, ma leggendo il tuo CSS mi pare che tu abbia dato al div #contenitore un'altezza fissa a 300px!!!
Prova a togliere quella specifica del tutto o a mettere height:auto e magari si risolve.
Se hai bisogno di dare al contenitore un'altezza minima, considera che il comando min-height (come anche min-width) non viene interpretato da Explorer, quindi c'è bisogno di fare qualche piccolo aggiustamento, ampiamente descritto in molti tutorial online.

Facci sapere se hai risolto!

[ricman]

Originariamente inviato da Lava
Scusa, ma leggendo il tuo CSS mi pare che tu abbia dato al div #contenitore un'altezza fissa a 300px!!!
Prova a togliere quella specifica del tutto o a mettere height:auto e magari si risolve.

Purtroppo non è così. Se tolgo l'altezza dal contenitore questultimo "sparisce" (si "ritira") perchè le colonne sono float e quindi non incidono col contenitore.

Originariamente inviato da Lava
Se hai bisogno di dare al contenitore un'altezza minima, considera che il comando min-height (come anche min-width) non
..
...
Facci sapere se hai risolto!

Già usando height mi funziona come min-height su FF, mentre IE interpreta, con tutti i suoi "lasciapassarebug", correttamente.
Non sono riuscito a risovere. Ho usato un escamotage per quello che nella img ho colorato di azzurro: ho messo una foto orizzontale di sfondo color azzurro-verde-azzurro per dare lo stesso effetto che cercavo.
Peccato... se mentre finisco il sito trovo un'altra soluzione vi farò sapere...