Aller aux menus

#CSS {débutant;}

• Premiers pas
• CSS3
• Tutoriels
• Livre
• Boite à Outils

Mises en page en colonnes avec display:table

Ce chapitre fait suite au tutoriel "Mises en page en colonnes sans tableau".

Code (x)html

Pour rappel, le code html utilisé est :

<div id="entete">
 En tête
</div>

<div id="main">
 <div id="menu">
  Menu
 </div>

 <div id="contenu">
  Contenu
 </div>
</div>

<div id="footer">
 Pied de Page
</div>

Code CSS

Cette fois, le navigateur qui va nous embêter n'est pas Internet Explorer (bien qu'il faille au moins la version 8 pour que ça marche), mais Chrome. La mention max-width ou min-width n'a en effet aucun effet sur lui : il lui faut des tailles fixes. Il ne sera donc pas possible d'avoir à la fois une définition de largeur maximum pour le bloc div id="main" et une largeur fixe pour le menu. Ou alors il faut faire le choix que Chrome affiche le #main sur toute la largeur dont il dispose selon les résolutions d'écran...

Le code explicité prend donc l'option largeur fixe... mais qui ne l'est en fait qu'à moitié. En effet, en cas de fenêtre moins large que les 960 pixels déclarés au total (240+720 pixels), les colonnes se réduisent de façon fluide, même celle du menu.

#entete, #menu, #contenu, #footer {
padding:1px 0; /* pour la fusion des marges*/
}
#entete {
background-color:#FF9900;
text-align:center;
}
#main {
display:table;
margin:auto;
}
#menu  {
display:table-cell;
width:240px;
background-color:#FF3366;
}
#contenu {
display:table-cell;
background-color:#9966FF;
}
#footer {
background-color:#669933;
text-align:center;
}

Le principe est donc très très simple :

• Le div id="main" est émulé en tableau grâce à display:table
• Les div #menu et #contenu deviennent des cellules grâce à display:table-cell

Le contenu de ces cellules s'aligne par défaut en haut, mais on peut changer ça en déclarant un vertical-align:middle pour centrer le contenu verticalement, ou un vertical-align:bottom pour l'aligner en bas.

L'avantage notable de cette technique c'est que les 2 colonnes sont toujours de même hauteur, quels que soient leurs contenus respectifs. Chose qui est impossible, ou du moins difficile, à obtenir avec des positionnements "classiques".

Voir le résultat

Quant à Internet Explorer 7 (et moins), il faudra avoir recours à une feuille de style alternative avec une mise en page par positionnement pour sauver les apparences. On peut considérer que c'est lourd, mais il y a toujours tellement de détails qui ne fonctionnent pas, ou mal, avec les anciennes versions d'IE qu'on est obligé d'y passer. Alors...

Lectures complémentaires

• Mise en page avancée grâce à la propriété display (Alsacreations)
• Simuler des tableaux en CSS (Babylon Design)

Haut