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

Ce n'est pas parce que les divs flottants n'ont pas de hauteur, mais parce que les divs flottants n'affectent pas la taille de l'élément parent.

Vous pouvez utiliser le overflow pour que l'élément parent prenne en compte les éléments flottants :

#outer { overflow: auto; }

Answer 2

Il existe plusieurs solutions à ce problème :

#outer: overflow: hidden;

ou ajoutez du contenu non affichable à la div externe qui se trouve après les div flottantes et à laquelle vous ajoutez ensuite une règle de style clear : both.

Vous pouvez également ajouter, par le biais de css le pseudo-élément :after pour insérer du contenu après les divs auxquels vous appliquez ensuite clear : both - cette méthode présente l'avantage de ne pas nécessiter de balises supplémentaires.

Ma préférence va au premier.

Answer 3

Vous pouvez effacer la marge en insérant un élément après les éléments flottants qui a une valeur de clear qui lui est appliquée, car les éléments enfants flottants font que le parent a une hauteur nulle, puisqu'ils ne prennent pas en compte la hauteur des enfants flottants.

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

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

#left{
    float:left;
}

#right{
    width:500px;
    float:right;
}
.clear{ clear: both; }

Answer 4

Essayez ça :

<div id="outer">
    <div id="left">
         ...
    <div id="right">
    <div style="clear:both"></div>
</div>

Answer 5

Ajoutez overflow : hidden ; à la div principale.

<style type="text/css">
#outer{
    background-color:rgba(255,255,255,.5);
    width:800px;
overflow: hidden;
border: 1px solid green;
}

#left{ 
    float:left;
border: 1px solid red;
}

#right{
    width:500px;
    float:right;
border: 1px solid yellow;
}
</style>