Suddivisione div#content layout due colonne

[Stema]

Salve a tutti. Avrei bisogno ancora una volta del vostro aiuto:

ho una pagina del mio sito impostata con un classico layout a due colonne: c'è un container (largo 760px), c'è un #header, c'è la colonna #navigation (impostata a sinistra con float: left), un div#content ed un #footer.
Tralasciando il container, l'header ed il footer, vorrei concentrarmi sulla #navigation e sul #content.
Questo è il codice css dei due:

div#navigation {
	float: left;
	width: 150px;
	margin: 10px 0;
}

div#content {
	margin-top: 15px;
	margin-left: 150px;
}

All'interno del #content ci sono due div affiancati (div#articolo e div#linkcorrelati), dove #linkcorrelati è ad altezza variabile ma comunque sempre meno alto rispetto al div#articolo anch'esso ad altezza variabile, ed uno che sta sotto a questi ultimi due (div#banner, che vorrei centrato nel div#content). Il loro codice è il seguente:

div#articolo {
	padding: 0 20px;
	width: 370px;
	margin-bottom: 20px;
             float: left;
}

div#linkcorrelati {
	width: 160px;
	margin-left: 410px;
}

div#banner {
	padding: 15px 20px 10px 15px;
	height: 125px;
	font-size: 11px;
	text-align: center;
	width: 375px;
	margin: 10px auto;
}

La cosa strana che accade è la seguente: in IE6 ed IE7 tutto funziona bene: all'interno del #content ci sono i due div affiancati (#articolo e #linkcorrelati) e sotto di loro, centrato rispetto al div #content, c'è il div#banner. L'anomalia nasce in Mozilla Firefox: il div#banner mi viene posizionato centrato orizzontalmente nel div#content ma sovrapposto al div#articolo appena sotto rispetto a div#linkcorrelati. Praticamente è come se per Mozilla l'altezza del div#content è data solamente da quella del #linkcorrelati e quindi quando va a posizionare il div#banner, non va a considerare quella del div#articolo.
Il codice html è scritto bene:

<div id="content">
		
	<div id="articolo">
	           <h1>Qui il titolo dell'articolo</h1>
                        

Qui il testo dell'articolo</p>
	</div>
				
	<div id="linkcorrelati">Qui i link correlati</div>
				
	<div id="banner"></div>
</div>

Vorrei tanto far capire a Mozilla che l'altezza del #content è data dall'#articolo, per cui il div#banner me lo deve andare a posizionare al di sotto di esso!!
Mi potete aiutare, per favore? Grazie mille!!

[Gufo]

Originariamente inviato da Stema
Salve a tutti. Avrei bisogno ancora una volta del vostro aiuto:

ho una pagina del mio sito impostata con un classico layout a due colonne: c'è un container (largo 760px), c'è un #header, c'è la colonna #navigation (impostata a sinistra con float: left), un div#content ed un #footer.
Tralasciando il container, l'header ed il footer, vorrei concentrarmi sulla #navigation e sul #content.
Questo è il codice css dei due:

div#navigation {
	float: left;
	width: 150px;
	margin: 10px 0;
}

div#content {
	margin-top: 15px;
	margin-left: 150px;
}

All'interno del #content ci sono due div affiancati (div#articolo e div#linkcorrelati), dove #linkcorrelati è ad altezza variabile ma comunque sempre meno alto rispetto al div#articolo anch'esso ad altezza variabile, ed uno che sta sotto a questi ultimi due (div#banner, che vorrei centrato nel div#content). Il loro codice è il seguente:

div#articolo {
	padding: 0 20px;
	width: 370px;
	margin-bottom: 20px;
             float: left;
}

div#linkcorrelati {
	width: 160px;
	margin-left: 410px;
}

div#banner {
	padding: 15px 20px 10px 15px;
	height: 125px;
	font-size: 11px;
	text-align: center;
	width: 375px;
	margin: 10px auto;
}

La cosa strana che accade è la seguente: in IE6 ed IE7 tutto funziona bene: all'interno del #content ci sono i due div affiancati (#articolo e #linkcorrelati) e sotto di loro, centrato rispetto al div #content, c'è il div#banner. L'anomalia nasce in Mozilla Firefox: il div#banner mi viene posizionato centrato orizzontalmente nel div#content ma sovrapposto al div#articolo appena sotto rispetto a div#linkcorrelati. Praticamente è come se per Mozilla l'altezza del div#content è data solamente da quella del #linkcorrelati e quindi quando va a posizionare il div#banner, non va a considerare quella del div#articolo.
Il codice html è scritto bene:

<div id="content">
		
	<div id="articolo">
	           <h1>Qui il titolo dell'articolo</h1>
                        

Qui il testo dell'articolo</p>
	</div>
				
	<div id="linkcorrelati">Qui i link correlati</div>
				
	<div id="banner"></div>
</div>

Vorrei tanto far capire a Mozilla che l'altezza del #content è data dall'#articolo, per cui il div#banner me lo deve andare a posizionare al di sotto di esso!!
Mi potete aiutare, per favore? Grazie mille!!

Hai provato a mettere nel banner clear:left; non lo vedo e ci vuole

[Stema]

Ho provato, ma se al #banner gli dò il clear:left, sia IE che Mozilla mi posizionano il banner al di sotto del div#navigation!! Potrei anche accettarla questa cosa, ma sinceramente vorrei risolvere il problema anche per situazioni analoghe future.

[Stema]

Forse con questa immagine è tutto più chiaro:

questo è quello che fa Mozilla: non riconoscendo l'altezza del div#articolo all'interno del #content, va a posizionare il #banner sotto il #linkcorrelati.

[Mich_]

Per avere quel posizionamento il banner deve stare DENTRO il content (quello disegnato rosso).

Per farlo stare sotto ai due blocchi, puoi usare un trucco:
#header { width: 100% } /* o giu` di li` */
#navigation { float: left; }
#content { margin-left: >= della largh di navigation }
#content:after { clear: left; e gli altri attributi come consigliato in [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float )
#articolo { float: left; width: 370px; }
#link_corr { float: left; width: 160px; } /* la somma delle larghezze compreso margini e padding non deve superare la largh del content (meglio se qualche px in meno) */
#banner_cont { float left; width: 100%; } /* o giu` di li` */
#banner { margin: 0 auto; }

Nota che il banner_cont (cioe` un blocco che lo contiene) e` largo quanto il suo contenitore, per cui anche se e` float va a posizionarsi sotto agli altri blocchi.
Il banner vero e proprio poi sara` centrato nel suo contenitore. Per IE occorre anceh mettere un text-align: center nel banner_cont.

[Stema]

Grazie, Mich_. Il banner sta dentro il content. Adesso proverò a fare come mi hai consigliato tu. Dando un occhiata al codice che mi hai scritto, dovrebbe funzionare.
Quello che proprio non riesco a capire è come faccia Firefox a non considerare il content tanto alto quando il div#articolo!! Boh! Misteri della fede!!!

[Mich_]

Quello che proprio non riesco a capire è come faccia Firefox a non considerare il content tanto alto quando il div#articolo!! Boh! Misteri della fede!!!

Non sono misteri.
Il mistero semmai e` perche` IE lo consideri interno.

Un blocco flottato esce dal normale flusso dei blocchi con posizionamento statico (quello di default).
Pero` un blocco statico puo` racchiudere un blocco flottato se c'e` un clear corrispondente prima della fine del contenitore.

Il problema e` che un clear agisce su tutta la larghezza della finestra, per cui non tuo caso non puoi usarlo cosi` come si fa di solito.

Un'alternativa (altrettanto valida) e` usare il float:left per il #navigation e il float:right per i blocchi interni al #content. Questo ti obbliga ad un'inversione dell'ordine dei blocchi (il #link_corr va messoprima del #articolo), ma poi puoi usare il clear:right all'interno del #content e il clear:left per inserire il footer.

[Stema]

Ok, adesso va bene. L'unico problema è che ho dovuto aggiungere circa 30px di margin-bottom al banner_cont, poichè mi si andava a sovrapporre al footer.

Con IE 5.5 è meglio non guardare la pagina, poichè mi verrebbe da piangere. Per decisione personale ho imposto a me stesso già da circa 3 mesi di non testare più le mie pagine nelle versioni inferiori di IE6!!

Grazie ancora, Mich_!!