Design élastique mais pas trop - 10
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 {width:200px; margin-right:-210px; margin-left:10px}
Ça marche et l'on pourrait s'en tenir là. Mais pourquoi cette dissymétrie entre les deux colonnes ? C'est énervant et, surtout, cela causera des erreurs lors des modifications futures : trois nombres à maintenir en cohérence, c'est piégeux.
Pensons un peu : "elle reste collée au bloc des articles"… parce qu'elle est, comme l'autre colonne, flottée à gauche ! Elle ne fait donc que ce qu'on lui demande, alors changeons la demande :
#cl_1_2 {width:200px; margin-right:-210px; float:right}
Et c'est fini ! Revoici donc le CSS définitif, avec son nettoyage préalable, tel que donné au début du roman :
/* Zéro partout par défaut*/
.ln {clear:both;margin:0;padding:0}
.cl {float:left;margin:0;padding:0}
/* Articles élastiques et modules rigides */
#global {padding: 0px; margin: 0px 50px; width: auto}
#ln_1 {margin:0 210px}
#cl_1_0 {width:200px; margin-left:-210px; }
#cl_1_2 {width:200px; margin-right:-210px; float:right}
#cl_1_1 {margin:0 10px; width:100%;}