Design élastique mais pas trop - 6
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. Son fond est gris foncé.
- #global est devenu élastique, il occupe toute la largeur de body, exception faite des deux marges de 50 pixels par lesquelles on voit le fond de body. Le fond de #global est gris moyen ;
- #ln_1 est élastique (l'a toujours été) et occupe toute la largeur de #global, exception faite des deux marges de 200 pixels par lesquelles on voit le fond de #global. Le fond de #ln_1 est jaune ;
- les deux colonnes de modules sont restées rigides : 200 pixels de large. Par un (élégant autant qu'astucieux) jeu de marges négatives elles recouvrent exactement, en largeur, les marges de #ln_1 ;
- le bloc d'articles #cl_1_1 est actuellement rigide, nous voulons qu'il remplisse tout l'espace entre les deux colonnes de modules.
Quel est cet espace ? Hé bien, pas autre chose que la largeur "interne" de #ln_1, sa propriété 'width' (si on l'avait spécifiée). Nous voulons que #cl_1_1 remplisse pile cette largeur. Mais quel est l'encombrement de #cl_1_1, et lesquelles de ses propriétés faut-il indiquer ?
L'encombrement d'un bloc (en largeur) est égal à son width + les padding G et D + les bordures G et D + les marges G et D. Ceci est universel et vous devriez le savoir par cœur ! Notez au passage que l'encombrement des colonnes de modules est devenu zéro depuis tout à l'heure… c'est l'essence de ce design élastique et c'est ça qu'IE6 n'aime pas du tout, en plus du width:100%.
Pour #cl_1_1 nous allons commencer par faire simple. 'padding' et 'border' sont déjà nuls, nous allons en faire autant pour les marges. Ne restera plus qu'à indiquer le 'width' :
#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%;}
C'est (presque) fini, maintenant nous allons remettre des marges.
Note : cette fois j'ai supprimé les 20 pixels de padding en bas de #ln_1.