Comportamento differente altezza div in IE e FF

[Leggero82]

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:

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

[Mich_]

Rispondo solo a questo:

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.

Due possibilita`:
- chiudi il float con un opportuno blocco che contiene il clear (puo` essere anche invisibile e alto 1 px)
- fai diventare float anche il contenitore

[Leggero82]

grazie mille,
ho risolto rendendo float anche il div#contenitore ma non riesco a capire il motivo di tale comportamento

se un div ne contiene altri non sarebbe naturale che questo abbia un'altezza uguale a quella del div interno più grande?

[Mich_]

Se ne e` gia` parlato a lungo ...

Sicuramente sarebbe naturale, ma anche FF ha i suoi piccoli bug ...

Fa' conto che esistono tre strutture (quasi) indipendenti, che fanno fatica a parlarsi:
- position: absolute
- posizionamenti naturali
- float

[Leggero82]

quindi in realtà, in questo caso è il comportamento di IE ad essere corretto che anche senza rendere float il div#contenitore lo disegna dell'altezza giusta, mentre FF no.

grazie per le dritte, ora cerco materiale in merito