Gabarit en 3 colonnes flottantes

Le gabarit en 3 colonnes de cette page est une adaptation du tutoriel de John Oxton : a simple guide to 3 column layouts.

Cette colonne est la première dans le source. La colonne à gauche est la deuxième, et celle à droite, la troisième.

Les 3 colonnes sont flottantes et les valeurs des marges qui peuvent être négatives sont utilisées pour les positionner.

La longueur des colonnes n'a pas d'importance, comme le montre les liens ci-dessous :

On peut positionner les colonnes dans n'importe quel ordre en jouant sur les styles :

On peut mettre toute les colonnes en fluide, du moins sur Firefox, IE6 ne rend apparement pas les marges si on indique en % le width sur un float.


Par contre, on ne pourra pas mettre la colonne centrale en % et les colonnes latérales en taille fixe. Car en pur CSS, on ne peut pas fixer  comme valeur de propriété le résultat d'une addition entre un % et une valeur en pixel. Il faudrait avoir recourt à du javascript pour calculer dynamiquement la valeur. Et au final, cela ne devrait pas plus fonctionner sur IE6 que les trois colonnes en %.

Valid HTML 4.01!

Accueil

Cette Colonne est la deuxième dans le source

Cette Colonne est la troisième dans le source