Organiser une série de flottants en colonnes (1)
- Une série de flottants sur deux colonnes (page actuelle)
- Même chose, sur trois colonnes
- Avec un bloc parent non doté de HasLayout
Le problème
Le comportement flottant est souvent difficile à appréhender. En effet, même si les flottants sont souvent utilisés pour construire des « colonnes », ils ne sont pas spécifiquement conçus pour cela ! Du coup, on a parfois du mal à obtenir le comportement voulu.
Imaginons une série d'éléments de type bloc, que l'on voudrait organiser sur plusieurs colonnes, selon la structure suivante :
Problème : si la hauteur des blocs est variable, il devient alors difficile de gérer leur alignement horizontal.
Pour obtenir cet alignement horizontal de manière cohérente, on peut utiliser la propriété CSS clear.
Utilisation de la propriété CSS clear
Voici un exemple de ce que l'on peut faire. On notera que la gestion de la propriété clear par Internet Explorer 6 diffère de celle des autres navigateurs (voire captures d'écran ci-dessous).
Note : Les blocs gris sont des listes non ordonnées (éléments ul),
les blocs bordés de noir sont des items de liste (éléments li).
Exemple sur deux colonnes
La largeur du conteneur gris est fixée de telle sorte qu'il puisse contenir deux blocs horizontalement.
li en float: left;
li impairs sans propriété clear.
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
li en float: left;
li impairs avec clear: left;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
Captures d'écran
Sans l'utilisation de la propriété clear, le rendu avec Internet Explorer et les navigateurs modernes est sensiblement identique (du moins si l'on fait abstraction du Doubled Margin bug). Mais il suffit d'utiliser la propriété clear pour obtenir le rendu suivant :
Internet Explorer 7: le rendu est identique à celui de la version 6.