Une structure sur mesure avec les marges négatives

Publié le 23 mars 2006 par Francisek

Les structures définies dans le CSS sont la plupart du temps définies de manière fixe : chaque colonne de la structure (colonnes de navigation et colonne de contenu) a une largeur exprimée en pixels (pour over blog, environ 200px pour les colonnes de modules et 400 à 600 pour la colonne des articles, le tout contenu dans un élément de 800px) et une position flottante.
Le code HTML associé à cette structure est de la forme (chaque élément est colorisé pour les repérer dans les schémas):

<div id="header">Entête</div>

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

</div>

<div id="rightnav">Barre de navigation</div>

</div>

Vous aurez noté que le <div id="colonnes"> n'existe pas dans la structure d'over-blog, il se nomme, selon le modèle troisCol, deuxColDroite ou deuxColGauche.
Passez la souris sur l'illustration ci-dessous pour avoir un aperçu de ce que donne ce type d'affichage sur un écran de résolution inférieure aux 800px nécessaires.

#header (800px)
L'entête est ici

#content (600px)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla scelerisque lacus ut felis. Aliquam erat volutpat. Nullam sem. Ut sit amet est sed nisi porttitor consequat.

#rightnav (200px)
Barre de navigation

#footer
Pied de page ici

Dans le CSS, nous aurons :

#global{width:800px}
#top{}
#main{width:600px;float:left;}
#rightnav{width:200px;float:left;}
#footer{clear:left;}

C'est la solution la plus simple (et donc la plus arbitraire) pour définir un positionnement de colonnes. Là où le bas blesse, c'est que sur de petits écrans (PC en 800x600, WebTV et pourquoi pas WAP), ça déborde de tous les cotés (à droite et en bas) tandis que sur de grandes résolutions, on perd en lisibilité.

La solution la plus généralement utilisée est de définir les largeurs de ces éléments en pourcentages. Cette solution simple, donne un résultat qui semble être satisfaisant.

#header (100%)
L'entête est ici

#content(80%)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla scelerisque lacus ut felis. Aliquam erat volutpat. Nullam sem. Ut sit amet est sed nisi porttitor consequat.

#rightnav (20%)
Barre de navigation

#footer
Pied de page ici

Le CSS correspondant sera alors :

#global{width:100%}
#main{width:80%;float:left;}
#rightnav{width:20%;float:left;}
#footer{clear:left}

Le problème avec cette structure, c'est que sur de petits affichages la colonne de droite risque fort d'être beaucoup trop étroite pour afficher son contenu. Nous aimerions bien que sa largeur soit fixe malgré tout (à 200px).
Pour cela, nous pourrions placer les colonnes en position absolue, la colonne principale ayant une marge de droite de 200px, à condition que les deux colonnes soient placées dans un élément #deuxColDroite:

#header (100%)
L'entête est ici

#content(100%)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla scelerisque lacus ut felis. Aliquam erat volutpat. Nullam sem. Ut sit amet est sed nisi porttitor consequat.

#rightnav (200px, position: absolute)
Barre de navigation

#footer
Pied de page ici

Le CSS correspondant sera alors :

#global{width:100%}
#colonnes{width:100%;position:relative;}
#main{width:100%;position:absolute;top:0;left:0;margin-right:200px}
#rightnav{width:200px;position:absolute;top:0;right:0}
#footer{clear:left}

Ca complique pas mal les choses, d'autant que le pied de page est recouvert par nos deux colonnes centrales (à cause du positionnement absolu). Cette solution n'est donc pas très adaptée. Pourtant l'idée de soustraire les 200px de la colonne principale est intéressante.
Nous allons donc l'exploiter avec une autre technique que utilisera des positions relatives.
Nous savons réserver une partie de la largeur de la colonne principale, il ne nous reste plus qu'à y placer la colonne de droite. Celle-ci va immencablement être renvoyée au dessous de la colonne principale. Et si nous lui affections une marge de gauche négative ?

#header (100%)
L'entête est ici

#content (100%)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla scelerisque lacus ut felis. Aliquam erat volutpat. Nullam sem. Ut sit amet est sed nisi porttitor consequat.

#rightnav (200px)
Barre de navigation

#footer
Pied de page ici

Le CSS correspondant sera alors :

#global{width:100%}
#main{width:100%;margin-right:-200px;float:left;}
#content{margin-right:200px;}
#rightnav{width:200px;margin-left:-200px;float:right;}
#footer{clear:left}

Cette fois, nous obtenons le resultat escompté. De plus, en donnant une couleur de fond à #main dans le CSS, nous donnerons l'impression que les colonnes centrales et de droite on la même hauteur!