Dans le cas où vous avez besoin d'arrêter l'effet de
float mettez un
clear:both; dans une balise invisible ou visible selon vos besoins.
Sous Firefox, la balise doit être de type "block" (display:block;).
Code css :Exemple de code :
<style type="text/css">
#conteneur{border:1px solid red}
#col0,#col1,#col2{border:1px solid red}
#col0,#col1{width:50px;height:200px;float:left;}
.clear{clear:both;
display:block;
height: 0;
font-size: 1px;
line-height: 0px;
}
</style>Exemple de code :
<div id="conteneur">
<div id="col0">Colonne 1</div>
<div id="col1">Colonne 2</div><br class="clear" />
</div>En général, nous utilisons la balise (X)HTML
BR,
DIV ou
HR.
Cependant cette technique n'est pas au goût de tout le monde, car elle nous oblige à ajouter du code HTML.
La deuxième technique consite à ajouter un
overflow:hidden, et un
height:1% ou
zoom:1 sur l'élément conteneur.
Code css :Exemple de code :
<style type="text/css">
* html #conteneur{height:1%;}/*pour ie 6*/
#conteneur{border:1px solid red;overflow:hidden,}
#col0,#col1,#col2{border:1px solid red}
#col0,#col1{width:50px;height:200px;float:left;}
</style>Exemple de code :
<div id="conteneur">
<div id="col0">Colonne 1</div>
<div id="col1">Colonne 2</div>
</div>Cependant cette technique pose un problème, si vous avec des éléments en
position:absolute qui dépassent de l'élément conteneur. Ces derniers ne seront pas visibles ou coupés.
La troisième technique consite à utiliser le sélecteur
after sur l'élément conteneur.
Code css :
Exemple de code :
<style type="text/css">
#conteneur{height:1%;} /*pour ie 6 et ie 7 */
#conteneur:after {
content: ".";
display: block;
height: 0;
clear: both;
font-size:1px;
visibility: hidden;
}
#col0,#col1,#col2{border:1px solid red}
#col0,#col1{width:50px;height:200px;float:left;}
</style>Code (x)HTML:
Exemple de code :
<div id="conteneur">
<div id="col0">Colonne 1</div>
<div id="col1">Colonne 2</div>
</div>