Faire un design flexible à trois colonnes et cela proprement

colonne

Avoir plusieurs colonnes et avec des dispositions différentes resteront toujours un vrai casse tête pour le développeur front end, vu qu’on sera obliger de mettre des classes dynamiques en haut de page habituellement ( wrapper-2-col , wrapper-3-col, wrapper-1-col )

Mais cette solution est assez rudimentaire pour créer un design en trois colonnes formé habituellement, deux menus latéraux (appelés “sidebar“) et une colonne centrale pour le contenu du site.

Mais notre solution sera en réalité très simple à faire, et nous allons voir ensemble comment.

La structure html

La première chose, à faire pour commencer est d’englober les trois colonnes dans un div conteneur, que nous appellerons dans notre exemple “container”.

Puis il faudra mettre les éléments flottants (les sidebar gauche et droite) avant le corps central.

Comme toujours, ne pas utiliser des div vides pour pouvoir tester le contenu et pour voir les effets ; utilisez par exemple le générateur de lipsum.

Le CSS

Il suffit de styliser comme suit les colonnes :

Entrons en détail dans le vif du sujet en expliquant l’importance de chaque ligne css

Les éléments flottants ( sidebar left et right) sortent du flux d’éléments, ce qui conduit la colonne centrale à prendre toute la largeur comme s’ils étaient ignorés.
Utiliser la propriété neutre comme overflow permet au contenant de tenir compte de ces flottants et de les englober pour que tout rentre dans l’ordre.

Mais faire flotter les colonnes sidebar left et right ne suffira pas, il faut aussi leur attribuer une largeur fixe.

Enfin, on attribuera une largeur maximale autorisé ou automatique sur la colonne centrale afin qu’il s’adapte automatiquement à la largeur disponible.
Il utilisera la propriété overflow pour que cette dernière tienne compte des deux colonnes sur les cotés.

Notre technique, pourra suivre l’évolution de la mise en page même si la mise en page change (une colonne ou une autre ou bien les deux ou aucune en fonction des templates utilisés), la colonne centrale sera toujours adaptée correctement, ainsi que son contenu.

Répondre