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.
- fluide (recharger la page avant d'essayer ce style, fonctionne sur Firefox, sur IE résultat catastrophique)
- retour à fixe
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 %.