CSS : Les divs flottants ont une hauteur de 0

Question

J'essaie de placer deux divisions côte à côte à l'intérieur d'une autre division, de manière à avoir deux colonnes de texte et à ce que la division extérieure dessine une bordure autour des deux :

HTML

<div id="outer">
    <div id="left">
         ...
    <div id="right">
</div>

CSS

#outer{
    background-color:rgba(255,255,255,.5);
    width:800px;
}

#left{
    float:left;
}

#right{
    width:500px;
    float:right;
}

Cependant, la division extérieure enregistre une hauteur de 0px et la bordure ne contourne donc pas les autres divisions. Comment puis-je faire en sorte que la division extérieure reconnaisse la hauteur des éléments qu'elle contient ?

Answer 1

Vous devez également faire flotter le div extérieur. Les divs qui contiennent des divs flottantes et qui ne sont pas flottantes elles-mêmes s'effondrent.

#outer{
    background-color:rgba(255,255,255,.5);
    width:800px;
    float:left;
}

#left{
    float:left;
    width:300px;
}

#right{
    width:500px;
    float:right;
}

Answer 2

Que dites-vous de ça ?

<style type="text/css">
#outer{
   background-color:rgba(255,255,255,.5);
   width:800px;
   border:thin solid #000000;
   height:300px;
   margin:5px;
   padding:10px;
}

#left{
   float:left;
   border:thin dashed #000000;
   width:385px;
   height:100px;
   margin:5px;
}

#right{
   width:385px;
   float:left;
   border:thin dashed #000000;
   height:100px;
   margin:5px;
}
</style>

<div id="outer">
   <div id="left">
   </div>
        ...
   <div id="right">
</div>
</div>

Answer 3

Si la div à l'intérieur d'un parent est flottante, elle ne fait plus partie de la div parent : vérifiez-le en inspectant l'élément parent.non pour résoudre votre problème il y a deux méthodes : 1) créer un div vide à la fin à l'intérieur du parent, le classer comme .blank et appliquer les css suivants

.blank:after{
        content: "";
        clear:both;
        display:block;
    }

Ou 2) donner au parent une classe .clear-fix et ajouter du css

.clearfix:after {
    content: "";
    clear: both;
    display: block;
}

il donnera au parent une hauteur égale au contenu