C’est un problème auquel se confrontent régulièrement les intégrateurs : créer un design en trois colonnes – habituellement, deux menus latéraux (appelés « sidebar ») et une colonne centrale pour le contenu du site.
Mais c’est en réalité très simple à faire, et nous allons voir comment.
Le html
La première chose, c’est d’abord de placer les trois colonnes dans un conteneur, que nous appellerons ici « page« . Ensuite, il faut mettre les éléments flottants (les sidebar donc) avant le corps central.
<div id="page"> <div id="gauche"></div> <div id="droite"></div> <div id="centre"></div> </div>
Comme toujours, essayez d’ajouter un peu de contenu pour pouvoir voir les effets ; utilisez par exemple le générateur de lipsum.
Le CSS
Maintenant, il suffit de mettre en place les éléments :
#page {
overflow: auto;
}
#gauche {
width: 200px;
float: left;
}
#droite {
width: 200px;
float: right;
}
#centre {
width: auto;
overflow: hidden;
}
Voyons ces lignes en détail :
#page {
overflow: auto;
}
Les éléments flottants (utilisés avec la propriété float donc) sortent du flux d’éléments, ce qui conduit les autres éléments à passer en-dessous comme s’ils étaient ignorés. Utiliser une 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.
#gauche {
width: 200px;
float: left;
}
#droite {
width: 200px;
float: right;
}
On place simplement les éléments flottants (les menus latéraux) à gauche et à droite avec la propriété float, et on leur attribue une largeur fixe.
#centre {
width: auto;
overflow: hidden;
}
Enfin, on donne à l’élément central une largeur automatique afin qu’il s’adapte automatiquement à la largeur disponible. Là encore, on use de la propriété overflow pour que cette colonne tienne compte des deux éléments flottants.
Avec cette méthode, si votre design est évolutif ou que la mise en page change (une colonne ou une autre ou bien les deux ou aucune en fonction des pages visitées, par eemple), la colonne centrale sera toujours adaptée correctement, ainsi que son contenu.