Emmanuel Béziat

Emmanuel Béziat

jeune développeur web perpignanais passionné de geekeries

je travaille chez Italic, une chouette web-agency à Paris

je fus également formateur web à l’IDEM, dans le sud plein de soleil

Aligner trois colonnes proprement

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 “container”. Ensuite, il faut mettre les éléments flottants (les sidebar donc) avant le corps central.

<div class="container">
	<div class="sidebar--left"></div>
	<div class="sidebar--right"></div>
	<div class="content"></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 :

.container {
	overflow: auto;
}

.sidebar--left {
	width: 200px;
	float: left;
}

.sidebar--right {
	width: 200px;
	float: right;
}

.content {
	overflow: hidden;
}

Voyons ces lignes en détail :

.container {
	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.

.sidebar--left {
	width: 200px;
	float: left;
}

.sidebar--right {
	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.

.content {
	overflow: hidden;
}

Enfin, on ne précise aucune largeur à cet élément afin qu’il s’adapte automatiquement à l’espace disponible. Là encore, on use de la propriété overflow pour que cette colonne tienne compte des deux éléments flottants.

Conclusion

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 exemple), la colonne centrale sera toujours adaptée correctement, ainsi que son contenu. Vous pouvez voir le gabarit en action et le tester sur ce pen.

Si vous voulez plus d’explication sur le fonctionnement des flottants et des overflow, je vous conseille un bon article : Le contexte de formatage block en CSS.