altezza dei div

[coniglio]

Ciao,
non ho ancora capito come mai volte quando faccio una struttura di div del tipo:

<div id="padre">
<div id="figlio1">
</div>
<div id="figlio">
</div>
<hr/>
</div>

il div padre non prende le dimensioni in altezza dei div che contiene...

Mi sapete spiegare?
E' importante perchè se supponiamo che i due div figli siano affiancati con un float:left; (e che ovviamente hr sia clear:left
e che io abbia bisogno di avere uno sfondo del colore di uno dei due div, non posso darglielo perchè il div padre non prende le dimensioni in altezza....

Grazie a chiunque mi spieghi questa cosa

[Mich_]

La risposta c'e` gia` nel forum (usa la ricerca: bottone in alto a dx).

Il problema mi pare si presenti con IE, quando i figli sono flottati ed il padre no.
Metti float anche nel padre.

[seed_squall_it]

Mich_ ha ragione, ma puoi fare meglio ancora usando un
al posto dell' <hr />. Il tag <hr /> non ha ancora un box model ben definito, sebbene sia semanticamente più corretto per "ripulire" il float e quindi separare concettualmente la sezione in cui si trova da quella seguente. La strada di usare un elemento come un <hr /> o un
è cmq quella preferibile, piuttosto che rendere flottante anche il box contenitore. In questo modo, se il contenitore è a sua volta contenuto da solo in un box, può determinarne l'altezza (al contrario di quando lo dichiari flottante). Inoltre, usare un elemento che fa il clear all'interno del box contenitore, risolve un bug di Netscape 6 con i box che contengono solo box flottanti.

[coniglio]

è vero, se metto float anche al padre allora funziona...ma che senso ha?
se metto il br al posto dell'hr non mi cambia nulla...ho notato che a volte si risolve mettendo un apposito div di chiusura del float....ma anche in questo caso mi sembra un'assurdità.

d'ora in poi flotterò anche il padre ma mi piacerbbe trovare una soluzione più lineare.
Grazie comunque a tutti e due

[seed_squall_it]

Il fatto che non si risolva col
mi lascia da pensare...che si tratti di un
, di un <hr /> o di un <div>, la sostanza non dovrebbe cambiare...facendo il clear all'interno dell'elemento padre, dovrebbe cmq essere ripristinato il flusso in quel punto e quindi ul tuo box dovrebbe essere influenzato dall'altezza dei box flottanti che contiene. Non è che usi l'<hr /> senza scriverci lo spazio tra "hr" e "/"? Perché quello spazio molto spesso è fondamentale, visto che alcuni browser non riconoscono il segno di chiusura del tag se non è preceduto da uno spazio.

Per il fatto del rendere flottante anche il padre, è presto detto. Quando rendi flottante un elemento, lo estrai dal normale flusso del documento. Ciò significa che l'elemento flottante non influenzerà gli elementi posizionati normalmente (in modo statico) e questo perché float è un particolare tipo di position. Proprio come i box posizionati in modo relativo, fisso o assoluto, anche i box flottanti assumono uno z-index automaticamente maggiore dei box statici. z-index che però è "fittizio", nel senso che se provi ad impostarlo manualmente, non ha effetto sui box flottanti, a differenza dei box posizionati in modo relativo, fisso o assoluto. Rendendo flottante anche l'elemento padre, non fai altro che "alzarlo di un piano", portandolo sullo stesso piano dei suoi figli flottanti, che quindi agiscono come se fossero posizionati in modo statico dentro di esso e ne influenzano le dimensioni.

[coniglio]

Grazie sei stato chiarissimo.
Continuo comunque ad essere dell'idea che è un pò troppo macchinoso..
Grazie