elastique

Le point de départ On pourrait penser traiter la colonne de droite comme celle de gauche : #cl_1_2 {width:200px; margin-right:-210px} Mais çe ne suffit pas, elle reste collée au bloc des articles. Qu'à cela ne tienne, rajoutons une marge gauche : #cl_1_2...

Le point de départ Cette colonne, #cl_1_0, étant flottée à gauche ne demande qu'à filer aussi à gauche que possible. Il suffit donc d'allonger sa laisse : #cl_1_0 {width:200px; margin-left:-210px;} Un peu plus coton, la colonne de droite.

Le point de départ Nous commençons donc par augmenter les marges de #ln_1 : #ln_1 {margin:0 210px} Le résultat est sous vos yeux. Reste à ajuster les colonnes de modules. D'abord la première dans le flux, donc celle de gauche.

Je vous avais bien dit que ça exploserait… #global {padding: 0px; margin: 0px 50px; width: auto} #ln_1 {margin:0 200px} #cl_1_0 {width:200px; margin-left:-200px;margin-right:10px} #cl_1_2 {width:200px; margin-right:-200px;margin-left:10px} #cl_1_1 {margin:0;...

Le point de départ #global {padding: 0px; margin: 0px 50px; width: auto} #ln_1 {margin:0 200px} #cl_1_0 {width:200px; margin-left:-200px} #cl_1_2 {width:200px; margin-right:-200px} #cl_1_1 {margin:0; width:100%;} Je vous redonne le CSS obtenu à l'étape...

Le point de départ Là, il faut récapituler un peu pour trouver la suite, reconstruire ce qui est affiché en commençant par l'élément qui emballe tous les autres : body (hé oui, il faut remonter jusque là) est élastique par défaut et occupe toute la fenêtre....

Le point de départ Maintenant on pousse le principe jusqu'au bout, jusqu'à 200 pixels : #global {padding: 0px; margin: 0px 50px; width: auto} #ln_1 {margin:0 200px} #cl_1_0 {width:200px; margin-left:-200px} #cl_1_2 {width:200px; margin-right:-200px} #cl_1_1...

Le point de départ Même chose que dans l'article précédent mais, négligence ou imprudence, on ajoute quelque chose à la description de #ln_1 : #global {padding: 0px; margin: 0px 50px; width: auto} #ln_1 {margin:0 200px;overflow:hidden} #cl_1_0 {width:200px;...

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;...

Le point de départ Passons aux choses sérieuses : #global {padding: 0px; margin: 0px 50px; width: auto} #ln_1 {margin:0 200px} #cl_1_0 {width:200px;} #cl_1_2 {width:200px;} #cl_1_1 {margin:0 10px; width:530px;} #ln_1 (la ligne articles et modules) reçoit...