CSS : gérer les éléments flottants sans clear
jan
4
2010
Une excellente remarque d’Olivier Keul, confrère rencontré lors de notre formation Accessiweb à propos d’un des cours rédigés pour les étudients chinois de SRC Bordeaux me pousse à rédiger ce court article qui explique comment l’on peut aisément se passer des clear:both lors de la construction de feuilles de styles CSS recourant à des éléments flottants.
Cet article a été rédigé d’après l’article en anglais dispensé par le très intéressant blog www.quirksmode.org dont je vous recommande une lecture attentive !
Si vous avez déjà construit des feuilles de styles CSS en utilisant les propriétés “float“, vous avez du rencontrer en conséquence deux types de problèmes :
- Si l’élément contenant des éléments flottants possèdent une bordure, celle-ci ne s’aligne pas sur le bas de l’élément le plus haut,
- Si vous voulez placer un élément flottant en revenant dans le flux après les éléments flottants, leur positionnement dans le navigateur internet semble étrange !
En général (et c’est le cas de la plupart des intégrateurs avec lesquels j’en ai parlé) on rompt les flottements et on revient dans le flux normal en plaçant après les éléments flottants un élément qui possèdent les propriétés “clear:both“.
Le souci s’est que du point de vue de la sémantique ce n’est pas très pertinent car cette propriété nécessaite souvent la mise en place d’un élément HTML supplémentaire non justifié (un <br /> très souvent…).
Or l’article http://www.quirksmode.org/css/clearing.html propose une solution bien plus intelligente et respectueuse de la sémantique.
L’élément contenant les éléments flottants doit possèder la propriété “overflow:hidden” et possèder au moins une propriété fixant sa hauteur ou sa largeur :
1 2 3 | div.container {border: 1px solid #000000;overflow: hidden;width: 100%;}
div.left {width: 45%;float: left;}
div.right {width: 45%;float: right;} |
Dans ce code, le premier élément ayant comme classe container possède une largeur en % et la propriété “overflow:hidden”. Il contient deux élément flottants “right” et “left”. Sa bordure se cale cependant correctement grâce aux 2 propriétés combinées concernant la largeur et la visibilité.
Plus d’informations sur l’article en langue anglaise http://www.quirksmode.org/css/clearing.html.