Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

PLUSIEURS COLONNES DE MÊME HAUTEUR DANS UNE UNE PAGE HTML EN CSS

Présentation de l’exercice

Le but de cet exercice est de parvenir à créer une page HTML contenant plusieurs colonnes dans la hauteur s'adapte automatiquement à la hauteur de la plus grande colonne.

Cet exercice est plus dur qu’il n’y paraît : en effet, par défaut, chaque colonne que nous allons créer va posséder une hauteur dépendant de la hauteur de son contenu.

La solution proposée ici n’utilise aucun hack CSS ni JavaScript, et fonctionne sur tous les navigateurs couramment utilisés.

Présentation du problème

Par défaut, chaque colonne va adapter sa hauteur à la hauteur de son contenu.

On peut observer simplement ce comportement en créant par exemple trois colonnes en HTML, et en leur donnant un contenu de taille différente puis en réglant la taille, la place et la couleur de fond de nos colonnes en CSS.

Pour cela, commençons par créer deux fichiers colonnes.html et colonnes.css qu’on place dans le même dossier.

On crée trois colonnes en HTML

On donne des styles différents à nos colonnes

Nos colonnes ont des tailles différentes

Notre but va donc être de faire en sorte que chaque colonne possède la même hauteur, ou plutôt que toutes les colonnes s’alignent sur la hauteur de la plus grande.

Evidemment, ajouter la propriété height à chaque colonne ne serait pas satisfaisant, puisqu’on veut pouvoir rajouter ou enlever du contenu par la suite dans n’importe quelle colonne et que la taille soit automatiquement modifiée.

Pour faire bref, nous voulons que les colonnes changent de hauteur dynamiquement selon le contenu, mais qu’elles fassent toujours toutes la même hauteur les unes par rapport aux autres.

La solution : séparer la colonne en soi de son contenu

La solution, en HTML, va tout d’abord être de séparer les colonnes en soi de leur contenu en utilisant non pas un mais deux éléments div pour chaque colonne.

En effet, vous devez savoir qu’un élément parent flottant contenant un contenu flottant possédera toujours la même taille que son contenu.

Ainsi, nous allons placer nos contenus dans des div conteneurs que nous n’aurons ensuite plus qu’à positionner.

Nous utilisons des divs conteneurs et des divs de colonnes

Chaque div conteneur va donc contenir nos trois colonnes. Nous allons leur donner une largeur égale à 100% pour qu’ils occupent bien toujours toute la page.

Ensuite, pour que cette solution fonctionne, nous devons absolument faire flotter les div conteneurs et les éléments div représentant les colonnes.

Nous allons également donc attribuer les couleurs de fond aux conteneurs et non plus aux éléments div de colonnes.

On fait flotter tous nos divs

La structure est faîte. Pour le moment, nos trois div conteneurs sont superposés les unes sur les autres et c’est pour cela que la page s’affiche en bleu, c’est-à-dire la couleur de notre conteneur-g (dernier div conteneur déclaré en HTML).

Notre page est de la couleur de notre div enfant

En effet, ce sont bien les valeurs appliquées au sélecteur le plus précis en CSS qui l'emportent en cas de conflit.

Ce que nous allons devoir faire, maintenant, va être de décaler nos différents div conteneurs afin que le conteneur-g par exemple ne recouvre plus que l’espace dédié à la colonne-g.

Nous allons pouvoir faire cela en positionnant notre conteneur-c relativement par rapport à notre conteneur-d et notre conteneur-g relativement par rapport à notre conteneur-c.

On positionne nos conteneurs relativement les uns par rapport aux autres

Ici, vous devez bien à nouveau comprendre que chacun de nos div conteneurs à la base occupe toute la largeur de la page et qu’ils sont tous positionnés les uns sur les autres.

En donnant une position relative à notre conteneur-g et un right: 20%, on va le décaler de 20% du bord droit (c’est-à-dire de 20% vers la gauche) par rapport à notre div conteneur-d.

Ainsi, on va pouvoir apercevoir notre conteneur-d sur les 20% droit de notre page.

Ensuite, en décalant notre div conteneur-g de 60% par rapport à notre conteneur-c, on laisse les 60% centraux de notre page à notre conteneur-c.

Notre conteneur-g a donc en tout été déplacé de 20+60 = 80% vers la gauche, et ne recouvre donc plus que les 20% gauche de notre page.

Le problème ici est que cela a également fait bouger notre contenu, que nous allons devoir remettre à sa place devant chaque conteneur.

Nous allons pouvoir faire cela en positionnant relativement nos différents div de colonnes et en les décalant vers la droite d’un pourcentage équivalent à 20+60 = 80%.

On positionne nos colonnes relativement par rapport aux conteneurs

Finalement, afin de cacher complètement les parties des conteneur-g et conteneur-c qui se situent sur la gauche, hors de votre écran, nous allons utiliser un overflow: hidden sur notre conteneur le plus haut placé dans la hiérarchie HTML, c’est-à-dire le conteneur-d.

On cache les parties des conteneurs qui dépassent avec overflow hidden

Cela peut ne pas vous sembler strictement nécessaire, mais ça ne coûte pas grand chose et c’est plus « propre » et cela peut éviter certains problèmes d’affichage.

Ca y est, nous avons fini le travail et nous avons dorénavant des colonnes qui vont toujours s’adapter à la taille de la plus grande colonne, quelle qu'elle soit.

Des colonnes de même taille en CSS