Le modèle de css.maxdesign.com.au : la colonne centrale dans le flux, et les latérales flottantes

Voir le tutorial de css.maxdesign.com.au

Voir ma déclinaison

Le (X)HTML
<div id="container">
  <div id="top">
  </div>
  <div id="leftnav">
  </div>
  <div id="rightnav">
  </div>
  <div id="content">
  </div>
  <div id="footer">
  </div>
</div>

C'est très propre, rien de superflu, en fait on pourrait englober la "leftnav" et la "rightnav" dans un autre div puisqu'ils forment à eux deux le sommaire du site.

Le principe CSS

Le principe est simple : la colonne centrale est dans le flux avec des marges suffisament grandes pour accueillir les colonnes latérales qui sont flottantes. Sur le schéma ci-dessous, les colonnes sont numérotées dans leur ordre d'apparition dans le code, les hachures obliques representent les marges de la colonne centrale. Schéma de principe des CSS

Sur le tutorial de css.maxdesign.com.au la mise en page est fluide. On pourrait facilement rendre la mise en page fixe, ou la rendre élastique en mettant une valeur en em pour les marges de la colonne centrale.

Si on veut différencier la couleur de fond des colonnes droite et gauche, c'est possible en utilisant un fond en image avec des colonne factices sur le div container. Cet astuce fonctionne avec une mise en page fixe. Avec une mise en page fluide, il faut rajouter un DIV comme le fait Petr Stanicek sur son tutoriel.

<div id="main1"><div id="main2">
  <div id="left"></div>
  <div id="right"></div>
  <div id="middle"></div>
  <div class="cleaner">&nbsp;</div>
</div></div>
#main1 {
  margin:0; padding:0;
  background:yellow url("red.gif") top left repeat-y;
}
#main2 {
  margin:0; padding:0;
  background:url("blue.gif") top right repeat-y;
}
Avantages et inconvenients

Ce modèle répond bien à toute nos exigences et il a le mérite d'être simple.

Cependant on voit aussi qu'il contraint l'ordre des éléments dans le code, les div contenant les colonnes latérales devant être avant la colonne centrale pour pouvoir les faire flotter de part et d'autre de cette colonne.

Le modèle de John Oxbow : Les trois colonnes flottantes

Voir le tutorial

Voir ma déclinaison

Le (X)HTML

Cette fois la colonne centrale vient avant les colonnes latérales dans le source. Mais ce n'est pas obligatoire.

<div id="container">
  <div id="top">
  </div>
  <div id="content">
  </div>
  <div id="leftnav">
  </div>
  <div id="rightnav">
  </div>
  <div id="footer">
  </div>
</div>
Principe CSS

Dans ce modèle, on fait flotter tout les DIV constituant les colonnes à gauche. schéma des div flottant à gauche

On positionne ensuite les colonnes que forment nos DIVs, en agissant sur les marges que l'on peut notament mettre négatif. On positionne ainsi la colonne 2, en lui donnant une marge gauche négative égale à sa taille + la taille de la colonne 1. (Dans le schèma ci dessous, pour plus de clarté, j'ai séparé par un espace la valeur litérale et l'unité px ex: y px, la vraie syntaxe ne comprend pas d'espace ex: 10px) schéma des div flottant à gauche et positionné grâce au marges

Avantages et inconvénients

On peut modifier comme on veut l'ordre des colonnes en jouant sur les styles (voir ma déclinaison).

Problème : On ne pas avoir de colonnes gauche et droite de largeur fixe et une colonne centrale de largeur élastique ou fluide. En effet, on fixe la largeur des marges en additionnant ou en retranchant la taille de nos colonnes. Or on ne peut faire ces opérations que si on a des unités homogènes : soit tout en px, soit tout en %, ou tout en em pour nos colonnes. Ou alors il faudrait pouvoir faire ces calculs dynamiquement avec JavasScript. Mais nos effort seront de toutes façons vains avec IE6, car dans ce navigateur les marges d'un élément flottant avec une valeur en % sur le "width" ne semblent pas rendu. Ce modèle ne convient donc qu'à une mise en page fixe.

Conclusion

Avec les modèles étudiés, si on veut une mise en page fluide ou élastique, il ne semble n'y avoir d'autre choix que de passer par une structure HTML qui met en premier dans le code les colonnes latérales. Cela a sans doute des répercutions au point de vue indexation par les moteurs de recherche. De même d'un point de vue accessibilité, on peut réfléchir aux conséquences de ce choix.

Le deuxième gabarit étudié ne fonctionne que sur des mises en page fixes. Mais il permet le changement total de l'ordre des colonnes. Si bien qu'en fait la structure HTML de ce gabarit peut être similaire au premier.

Ici on a tenté de garder un minimum de DIV, et à part pour gérer les fonds, on en a guère ajouté pour des motifs de présentation. Mais on voit bien qu'il y a une contrainte sur l'ordre des éléments dans le code source. D'autre modèle sont à rechercher utilisant des DIV à motif de présentation.