Design élastique mais pas trop - 3

Publié le par brendutest

Le point de départ

Ça s'arrange parce qu'on va exploiter ces deux grandes marges pour, justement, y caser les colonnes de modules.

Commençons doucement, pour y voir clair, par 100 pixels (l'objectif restant 200) :

#global {padding: 0px; margin: 0px 50px; width: auto}
#ln_1 {margin:0 200px}
#cl_1_0 {width:200px; margin-left:-100px}
#cl_1_2 {width:200px; margin-right:-100px}
#cl_1_1 {margin:0 10px; width:530px;}

Comment ça marche (avec IE6 ça devrait marcher aussi) ? Chaque colonne de modules, jusqu'alors sagement logée à l'intérieur de #ln_1 (fond jaune), franchit cette limite et déborde de #ln_1 : c'est un beau cas d'overflow. Vérification ici, sinon on continue.

Publié dans Elastique

Pour être informé des derniers articles, inscrivez vous :
Commenter cet article