Altezza padre-figlio CSS

Question

Ho qualche problema con questi frammenti di codice:

CSS:

#wrapper{
    width: 600px;
    background: gray;
}

#left{
    float: left;
    width: 150px;
    height: 80px;
    background: red;
}

#right{
    float: left;
    width: 450px;
    height: 150px;
    background: yellow;
}

HTML:

<div id="wrapper">
    <div id="left"></div>
    <div id="right"></div>
</div>

L'altezza di sinistra è 80 px e l'altezza di destra è 150 px. Vorrei che questa cosa appaia così: http://img408.imageshack.us/img408/9978/dream.th. jpg Lo screenshot sopra di IE, quando uso IE, questi frammenti funzionano perfettamente. Ma quando uso un altro browser (opera, FF, Safari, Chrome), ottengo questo: http://img408.imageshack.us/img408/869/fact.th. jpg

Questo non è bello & # 8230; Voglio che l'altezza dell'elemento genitore (#wrapper) ottenga l'altezza maggiore dei due figli.

Answer 1

Questo è un bug in IE.

Contenenti float spiega perché vedi questo comportamento, mentre Metodi per contenere float offre soluzioni migliori rispetto all'aggiunta di markup extra.

Answer 2

CSS

#wrapper:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;}

Answer 3

Grazie per la rapida risposta David. Non ho letto tutto il contenuto che hai scritto (due link), ma ho trovato una soluzione sul secondo link. Ho messo un div extra, con & Quot; clear: both; & Quot; al contenitore e funziona! Grazie. Matt Ball: grazie, ma vorrei che questa cosa crescesse dinamicamente

Answer 4

Quando due div (s) fluttuano in un contenitore che non ha un'altezza fissa (o la sua altezza è < rispetto all'altezza massima dei div contenuti), il contenitore collassa in una linea di pixel e i tuoi div galleggianti traboccano il container.

Per forzare il contenitore a contenere i due div, è necessario cancellare entrambi i galleggianti prima di chiudere il contenitore! In altre parole ....

CSS

<style>
#wrapper{
    width: 600px;
    background: gray;
}

#left{
    float: left;
    width: 150px;
    height: 80px;
    background: red;
}

#right{
    float: left;
    width: 450px;
    height: 150px;
    background: yellow;
}

.clearer{ clear: both;}
</style>

HTML

<div id="wrapper">
    <div id="left"></div>
    <div id="right"></div>
    <div class="clearer"></div>
</div>

Answer 5

Basta impostare lo stile di overflow del genitore su qualcosa di diverso da quello visibile e avvolgerà il contenuto secondario.

Answer 6

La migliore soluzione che ho & # 8217; ho trovato è simile a Rodrigo & # 8217; s sopra, ma senza la necessità di inserire il carattere spazio nel contenuto (e quindi non è necessario specificare neanche la dimensione del carattere ). Se lo rendi una classe, puoi applicarlo a qualsiasi blocco contenitore, non solo al tuo wrapper. (Lo sento anche & # 8217; è meglio non definire un ID, ma che & # 8217; è una domanda diversa.)

.clearfix:after {
    clear: both;
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
}
*:first-child+html .clearfix { /* Optional fix for IE7 */
    zoom: 1; 
}