CSS: DIV contenant pas de hauteur sur l'ensemble de flotteurs

supposons que nous disposons de 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 les 200px en hauteur (la hauteur min) upperDiv de ne pas grandir, de sorte que son contenu recouvre le bas de la div.
Si j'ai retirer le flotteur de l'attribut du contenu de grande taille, il pousse et il y aura de problème.
Mais je ne sais pas lequel Div (rightDiv ou leftDiv) passe à 200px de hauteur.
Comment puis-je résoudre ce problème?

Grâce

OriginalL'auteur RYN | 2010-10-24

  1. 41

    Ensemble #upperDiv une des opérations suivantes:

    overflow: hidden;
width: 100%;

    ou 

    float: left;
width: 100%;

    ou créer une règle à l'aide de CSS pseudo-éléments (IE8+ compatible), comme cela

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

    Meilleure solution

    La création d'une classe réutilisable règle comme suit.

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

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

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

    P. S. Si vous avez besoin d'IE 6/7 compatibilité, la caisse ce post.

    OriginalL'auteur jessegavin

  2. 7

    C'est intentionnel, comme les flotteurs sont conçus pour des choses comme des images dans les paragraphes (lorsque plusieurs paragraphes peuvent s'enrouler autour de l'image).

    Complexe Spirale a un de plus amples explications pourquoi et Ed Elliot décrit un certain nombre de approches pour l'élaboration de conteneurs développer autour de flotteurs. Je trouve le overflow: hidden approche qui fonctionne le mieux dans la plupart des situations.

    C'est une belle explicatives réponse. De bons liens. +1
    Je n'ai jamais pleinement compris clearfix hacks jusqu'à ce que la lecture de ce Complexe Spirale de l'article. Devez lire!

    OriginalL'auteur Quentin

  3. 6

    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.

    OriginalL'auteur PJunior