CSS: DIV ne contenant pas de hauteur sur le flotteur fixé

Question

supposons que nous avons ce code:

<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> 

Lorsque le contenu de rightDiv et leftDiv passe la hauteur 200px (hauteur min) upperDiv ne pousse pas, donc ses chevauchements de contenu la div inférieure Si je supprime l'attribut float du grand contenu, il se développe et il y aura un problème. Mais je ne sais pas quelle Div (rightDiv ou leftDiv) passe 200px en hauteur. Comment puis-je résoudre ce problème?

Merci

Answer 1

Set #upperDiv une des opérations suivantes:

overflow: hidden; 
width: 100%; 

ou

float: left; 
width: 100%; 

ou créer une règle en utilisant des éléments pseudo-CSS (IE8 + compatible) comme celui-ci

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

Meilleure solution
Création d'une règle de classe réutilisable comme celle-ci.

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

Maintenant, vous pouvez l'appliquer à tout ce qui a besoin de cette même fonctionnalité. Par exemple ...

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

P.S. Si vous avez besoin de la compatibilité IE 6/7, allez sur le this post.

Answer 2

Ceci est intentionnel car les flottants sont conçus pour des choses comme les images dans les paragraphes (où plusieurs paragraphes peuvent entourer l'image). Complexe Spirale a un fuller explanation pour expliquer pourquoi et Ed Elliot décrit un nombre de approaches to making containers expand around floats. Je trouve que l'approche overflow: hidden fonctionne mieux dans la plupart des situations.

Answer 3

Après

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

ajouter

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

Il permettra de résoudre votre problème.