Sans titre-1 Commençons donc par le Template le plus commun du Web, celui à 2 colonnes.
Il sera constitué d'un entête (header), d'un menu situé sur la gauche, du contenu de la page sur la droite et d'un pied de page (footer). Pour l'exemple, le tout fera 900 pixels de largeur et sera centré au milieu de la page. Le menu quand a lui fera 200 pixels de largeur.

Oublier donc les tableaux (pour les irréductibles) et faisons donc cela dans les règles de l'Art via l'utilisation des CSS et de 4 balises <div></div> au minimum. Rien de bien compliqué pour établir une structure de Site Web de base.

En résumé, voila avec quoi on va terminer ce post.

  • Dans votre fichier HTML (Hors balises obligatoires : dtd,html,head,body et title) 
    <div class="header"></div>
<div class="menu"></div>
<div class="content"></div>
<div class="footer"></div>
  • Dans votre fichier CSS 
    body{width:900px;margin:auto;}
.menu{width:200px;float:left;}
.content{width:700px;float:right;}
.footer{clear:both;}

C'est tout?
Oui. Mais il s'agit là évidemment du strict minimum pour avoir un rendu en 2 colonnes. Jetons un coup d'oeil à tout ça en décrivant un peu ma façon de faire !

On peut déjà remarquer deux choses.

  1. L'une étant que j'utilise la balise <body></body> pour pour centrer et délimiter le tout. Pour ce qui devrait se trouver aux alentours, ce sera alors traiter directement sur la balise <html></html>.
  2. L'autre étant que je n'utilise que des attributs class pour déclarer mon style. C'est juste une façon de faire, préférant ainsi laisser les attributs id pour d'autres domaines.

Ensuite, je met une <div></div> pour chaque élément à placer dans la page.
Personnellement, je préfère rajouter une cinquième à tout ça, pour englober seulement le menu et le contenu.

<div class="header"></div>
<div class="container">
   <div class="menu"></div>
   <div class="content"></div>
</div>
<div class="footer"></div>

Cela me permet d'avoir une page en 3 parties distinctes :

  1. L'entête
  2. Le corps avec le menu, le contenu et pourquoi pas une autre colonne
  3. Le pied de page

Mais comme je l'ai dit plus haut, 4 balises sont nécessaires au minimum pour avoir un Template en 2 colonnes statiques, mais aussi pour un Template à 2 colonnes fluides, autrement dit un Template qui prendrait 100% de la largeur de la fenêtre.

Le code HTML désormais finit, on passe maintenant au CSS et on en profite alors pour enlever les marges générés automatiquement par les navigateurs et centrer la structure sur la page en lui donnant sa largeur maximale.
Deux méthodes s'offre à nous

  1. body{width:900px;margin:auto;}
    Tout simplement en utilisant la propriété margin:auto. Si on voudrait par exemple mettre une marge autour de la structure pour la décoller des rebords, on utilisera margin:10px auto pour avoir 10 pixels en haut et en bas de la structure. 
  2. body{width:900px;position:absolute;left:50%;margin:0;margin-left:-450px;}
    Dans ce cas, on annule les marges des navigateurs avec margin:0 (pas besoin de préciser le px quand c'est 0) et on positionne en absolue la page au centre avec les propriétés position:absolute et left:50%. Problème, le positionnement se fait à partir du côté gauche de la structure. On va donc y remédier en le décalant à gauche de la moitié de sa largeur avec margin-left:-450px.
    Il est intéressant de noter qu'avec cette méthode, si on diminue la fenêtre du navigateur en-dessous de la largeur maximale de la structure, le défilement horizontal de la fenêtre ne pourra plus accéder à une partie du site.

Nous allons seulement prendre la première méthode, compatible avec tous les navigateurs actuels.

body{width:900px;margin:auto;}

Ensuite, on s'occupe de faire "flotter" les éléments menu et content vers leur coté respectif.

body{width:900px;margin:auto;}
.menu{width:200px;float:left;}
.content{width:700px;float:right;}

Il est important de définir une largeur et de donner un float au content. Et cela pour une raison très simple, un bug de IE6. Mais il faut garder à l'esprit que le bug restera bien présent dans le cadre d'un Template en 2 colonnes fluides, puisqu'on ne donnera pas de largeur fixe sur le contenu. J'y reviendrai sans doute dans un prochain post. 
On termine alors par le footer en lui donnant une propriété qui annule les float, tout simplement.

body{width:900px;margin:auto;}
.menu{width:200px;float:left;}
.content{width:700px;float:right;}
.footer{clear:both;}

Quoi qu'il arrive, il est souvent nécessaire d'annuler les float pour éviter des bugs d'affichages, surtout si on utilise des blocs à taille variable.

Nous voilà donc avec un Template en 2 colonnes statiques. Il ne reste plus qu'à ajouter un peu de contenu et de couleurs pour tester le tout.