Billets publiés en octobre 2009 ↓

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 un zoom:1 ou un height:1% au contenu ;
• ne pas oublier de corriger le « Three Pixel Text Jog » (via un margin-left:-3px ou margin-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.

Mon petit fichier de tests est ici si vous le souhaitez.