Float non rimane racchiuso nel div container

[Alejandro]

Ragazzi forse è un problema classico ma non ho ancora trovato la soluzione in giro per il web.
Ho un problema di visualizzazione del container SOLO con FF (con ie si vede tutto bene).

Ho questo css:

.container {
    width: 1000px;
	height:auto;
	margin: 0 auto;
	background:transparent url(../img/bg_transparency_ffffff.png) repeat scroll 0 0;
}

.topsection1{
width: 1000px;
height:auto;
margin:0 0 5px 0; 
}

.topsection2{
 width: 980px;
 height:auto;
 margin:0px 10px 10px 10px;
 border: 1px solid #cccccc; 
}

.leftcolumn{
	float:left;
	clear: left;
	margin:0 0 0 10px;
	width:360px;
	height:auto;
}

.centercolumn{
	float:left;
	display:inline;
	margin:0 0 0 10px;
	width:300px;
	height:auto;
}


.rightcolumn{
	float:right;
	margin:0 10px 0 10px;
	width:300px;
	height:auto;
}

e questo html:

<div class="container">		
	<div class="topsection1">menu...</div>
	<div class="topsection2">top bar...</div>
	<div class="leftcolumn">colonna sx...</div>
	<div class="centercolumn">colonna centro...</div>
	<div class="rightcolumn">colonna dx...</div>
</div>

Il problema è che su FF il container si blocca alla fine della topsection2 e non va "sotto" le tre colonne. Suppongo che sia dovuto al float ma non ho saputo risolverlo. Questo problema non capita su IE.

[seed_squall_it]

E' sbagliato il tuo codice...infatti, se IE "fa giusto" e FF no, stai tranquillo che il problema è di quell'ignobile browser di IE che non interpreta come si deve nemmeno le cose più elementari!

Non puoi dichiarare un box contemporaneamente con float e clear...succede un bel casino. Guardando il codice strutturale che hai postato, deduco che le 3 colonne dovrebbero essere affiancate. Per risolvere, elimina la dichiarazione clear: left dalla colonna sinistra e aggiungi subito dopo i box delle 3 colonne (ma DENTRO il container, quindi appena prima di chiuderlo!) un box a livello di blocco vuoto (<div>) a cui assegni una classe CSS che fa il clear:

<div class="container">		
	<div class="topsection1">menu...</div>
	<div class="topsection2">top bar...</div>
	<div class="leftcolumn">colonna sx...</div>
	<div class="centercolumn">colonna centro...</div>
	<div class="rightcolumn">colonna dx...</div>
<div class="clr-both"></div>
</div>

A questo punto, nel CSS aggiungi la regola:

.clr-both {
clear: both;
}

che "pulisce" il float sia a destra che a sinistra (visto che le tue colonne flottano in entrambe le direzioni). Ripulendo il float all'interno del container, ripristinerai il flusso normale del documento e quindi l'altezza del più alto box flottante influenzerà quella del container. Puoi eliminare anche height: auto da tutte le colonne...auto è il valore di default per la proprietà height.

[Alejandro]

Grande!

Ma quindi questo clear lo devo togliere?

.leftcolumn{
float:left;
clear: left;
margin:0 0 0 10px;
width:360px;
height:auto;
}

[seed_squall_it]

Sì. La colonna è flottante e non deve fare il clear di nulla, quindi clear: left è inutile (anzi, può anche essere controproducente su pseudo-browser come IE). Il clear va fatto subito dopo gli elementi flottanti per ripristinare il flusso del documento. Puoi anche togliere height: auto da tutti i box, visto che auto è il valore di default per la proprietà height degli elementi block-level.

Ah, ora che lo vedo...aggiungi display: inline alle colonne di sinistra e di destra, perché hanno un margine impostato sullo stesso lato del float. Altrimenti IE 6 cade nel bug del margine raddoppiato...