Credo che il tema in questione sia già stato trattato in questo forum ma non ho trovato parole chiave che mi permettessero di eseguire una ricerca efficace..

Veniamo al dunque..

In un layout, nel corpo centrale, vorrei inserire due div affiancati che ne occupano tutta la larghezza.

Mi trovo però di fronte al seguente problema: se utilizzo un div in cui inserire i due div affiancati (con float left e right), il div che li contiene assume altezza = 0 in firefox.

Credo che un esempio (relativo solo ai div in questione e non a tutto il layout) sia più esplicativo:

codice:
CSS:
div#box-contenitore{margin-bottom:15px; width:570px; padding:0; border:1px solid #000;}
div#box-sx{float:left; width:275px; margin:0; background-color:#EFF5F8;}
div#box-dx{float:right; width:275px; margin:0; background-color:#EFF5F8;}


HTML:
<div id="box-contenitore">

<div id="box-sx">
Testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo
Testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo
Testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo
</div>




<div id="box-dx">
Testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo
Testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo
Testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo
</div>

</div>
Se proviamo a visualizzare il codice in Firefox e IE avremo due risultati diversi.

Sono sicuro che l'errore sia estremamente banale ma non riesco a venirne a capo, ho già provato anche a rendere il div#contenitore display:block...

Ecco il link all'esempio online: click