CSS: DIV che non contiene altezza su galleggiante impostato

Question

supponiamo di avere questo codice:

<div id='upperDiv' style='min-height:200px;border: 1px solid #000000;'> 
    <div id='rightDiv' style='float:right;width:75%;'> 
     content1 
    </div> 
    <div id='leftDiv' style='float:left;width:25%;'> 
     content2 
    </div> 
</div> 
<div id='lowerDiv' style='height:50px;border: 1px solid #000000;margin-top:5px;'> 
    content3 
</div> 

Quando il contenuto di rightDiv e leftDiv passa l'altezza 200px (l'altezza min) upperDiv non cresce, quindi la sua sovrapposizioni di contenuti il div inferiore Se rimuovo l'attributo float del contenuto di grandi dimensioni, cresce e ci sarà un problema. Ma non so quale Div (rightDiv o leftDiv) passi a 200px height. Come posso risolvere questo?

Grazie

Answer 1

Set #upperDiv una delle seguenti:

overflow: hidden; 
width: 100%; 

o

float: left; 
width: 100%; 

o creare una regola di usare i CSS pseudo-elementi (IE8 + compatibile) Ti piace questa

#upperDiv:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

Soluzione migliore
Creazione di una regola di classe riutilizzabile come la seguente.

.group:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

Ora è possibile applicarlo a qualsiasi cosa abbia bisogno di questa stessa funzionalità. Ad esempio ...

<div id='upperDiv' class="group" ... > 

P.S. Se si richiede la compatibilità IE 6/7, checkout this post.

Answer 2

Questo è intenzionale come i float sono progettati per cose come le immagini in paragrafi (dove più paragrafi possono avvolgere l'immagine).

Complex Spiral ha un fuller explanation sul motivo per cui Ed Elliot descrive un numero di approaches to making containers expand around floats. Trovo che l'approccio overflow: hidden funzioni al meglio nella maggior parte delle situazioni.

Answer 3

Dopo

<div id='leftDiv' style='float:left;width:25%;'> 
    content2 
</div> 

aggiungere

 <div style="clear:both"></div> 

che possa risolvere il problema.