Aller au contenu principal

Créer des blocs de hauteur identique

Fiche écrite en 2014, pour les navigateurs et les versions de l’époque. Vérifiez qu’elle correspond encore à votre environnement avant de l’appliquer.

Des colonnes côte à côte dont le fond s’arrête à des hauteurs différentes : un classique des mises en page en float. Première méthode, historique, avec l’affichage en tableau. Seconde méthode avec Flexbox, où les éléments d’une même ligne prennent naturellement la hauteur du plus grand.

CSS
#conteneur{display: table;}
#conteneur .content{display: table-cell; vertical-align:top}
CSS
.container{display:flex;}
.container .content{border:2px solid #F00; width:33%;}