Je découvre tout à fait par hasard ce billet de Nicole qui expose une solution très intéressante pour faire des colonnages.
L’astuce consiste à placer la propriété overflow
sur le contenu, pour que celui-ci puisse s’adapter en fonction de son contexte : il n’est alors plus besoin de lui préciser une largeur. On peut alors, modifier la largeur de la colonne, en ajouter, en supprimer : le contenu s’adaptera toujours.
Elle utilise d’ailleurs cette technique sur son projet Object-Oriented CSS.
Seules précautions à prendre pour IE 6 :
- appliquer un
hasLayout
(via unzoom:1
ou unheight:1%
au contenu ; - ne pas oublier de corriger le « Three Pixel Text Jog » (via un
margin-left:-3px
oumargin-right:-3px;
).
Seuls inconvénients trouvés :
- l’impossibilité de « faire sortir » un élément en dehors du cadre contenu, celui-ci ayant un
overflow
; - l’ordre du contenu qui se trouve inversé par rapport à l’affichage lorsqu’on utilise une colonne placée à droite.