Design fluide avec trois «colonnes»
- positionnement flottant des colonnes latérales
- contexte de formatage pour le bloc central overflow: auto
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium
Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt
ut labore et dolore magnam aliquam quaerat voluptatem.
Explications
- Les deux colonnes aux extrémités sont dotées de largeurs fixes, et sont flottantes à gauche et à droite. Par conséquent, elles "flottent" par dessus les autres blocs (et n'en repoussent que le texte ou les images et éléments en-ligne), en l'occurence par dessus notre colonne centrale.
- Ce conteneur central n'a pas de largeur fixe, et il n'est pas flottant. Il prend donc 100% de la largeur disponible, soit toute la largeur, car les flottants ne sont pas pris en compte.
- Enfin, pour éviter que les limites (bordures, fond) du bloc conteneur central ne s'affichent par dessous les flottants, on rajoute à ce conteneur un contexte de formatage à l'aide de la propriété overflow.
- Accessoirement, de petites marges ajoutées aux flottants permettent de créer un retrait entre le bloc central et les flottants.
Et le tour est joué, du moins pour les navigateurs qui appliquent les contextes de formatage. Pour les autres (pour l'essentiel : Internet Explorer 5 et 6), quelques petits correctifs sont nécessaires.