CSS : mise en page de type fluide avec marges négatives et colonnes factices

Voici quelques modèles de mises en pages de type "fluide", valides xhtml 1.0 strict et css 2.1 et parfaitement opérationnels sur les navigateurs actuels.
Ils sont basés sur l'utilisation de blocs flottants, certains étant positionnés avec de marges négatives.

La célèbre technique des "colonnes factices" améliorera l'effet visuel.

A propos des marges négatives :

Les marges négatives permettent d'écarter la zone de contenu des bords du navigateur, laissant ainsi une place pour la barre latérale. Elles permettent en outre de pouvoir placer (dans le code de la page) le bloc de contenu principal avant le bloc du sidebar (bloc vertical gauche et/ou droit). C'est une méthode plus "accessible" puisque les navigateurs non graphiques (ou ceux qui n'interprètent pas les css) afficheront en premier le contenu de votre page, ce qui est préférable.

A propos des colonnes factices :

Pour les modèles qui n'utilisent pas la technique des "colonnes factices", vous remarquerez que le sidebar ne se prolonge pas vers le bas (pour s'en rendre compte, on applique une couleur de fond). Pour donner l'illusion que les blocs latéraux descendent jusqu'en bas (ce n'est pas obligatoire !), on va utiliser un image de fond de la largeur des sidebars et qui va se répéter verticalement.
Il faudra créer des enveloppes supplémentaires et les sidebars auront dès lors une largeur définie en pixels. Cette technique est expliquée en détail sur Pompage.
Observez bien le code source de chaque exemple (imprimez-le !).

2 colonnes, sidebar à droite:

Largeur fluide: 100%, largeur du sidebar en em, sidebar à droite, sans "colonnes factices"

2 colones, sidebar à droite, colonnes factices :

Largeur fluide: 100%, largeur du sidebar de 200 px, sidebar à droite
avec "colonnes factices" : voir l'image utilisée (largeur de 200px)

2 colonnes, sidebar à gauche:

Largeur fluide: 100%, largeur du sidebar en em, sidebar à gauche, sans "colonnes factices"

2 colonnes, sidebar à gauche, colonnes factices :

Largeur fluide: 100%, largeur du sidebar de 200 px, sidebar à droite
avec "colonnes factices" : voir l'image utilisée (largeur de 200px)

3 colonnes :

Largeur fluide: 100%, largeur des sidebars en em, sans "colonnes factices"

3 colonnes, colonnes factices:

Largeur fluide: 100%, largeur des sidebars de 200px
avec "colonnes factices": les images sont les mêmes que ci-dessus

Voilà ! A vous de personnaliser vos colonnes factices.

Ce tutoriel est distribué sous une licence Creative Commons by-nc-sa 3.0. Consultez la page dédiée aux licences de distributions.