Dans cet article, nous partons du bout de code HTML suivant :

<div id="conteneur">
  <div id="bloc-1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam est at lorem. Ut eget orci. Sed tortor. Sed sapien metus, vulputate a, ornare quis, faucibus id, libero. Quisque elementum lobortis orci. Aliquam vehicula. Suspendisse vestibulum tempor enim. Sed eu tortor eget mauris gravida volutpat. Morbi ornare, mauris nec aliquet commodo, eros magna interdum odio, sed dictum eros est id nisl. Proin varius leo sit amet neque. Aliquam elementum est et urna. Sed a ante id nunc consequat vehicula.</p>
    <p>Sed ligula augue, volutpat eget, vehicula sit amet, auctor non, velit. Nunc sodales blandit elit. Vestibulum et urna. Vivamus suscipit, ligula et fringilla tincidunt, turpis leo pellentesque erat, quis elementum est est id mauris. Pellentesque sem turpis, mattis sed, rhoncus quis, blandit vel, sem. Nulla sed nisi non lorem lobortis egestas. Suspendisse elit diam, iaculis a, dapibus in, vehicula a, dui. Nulla facilisi. Vivamus rutrum euismod nunc. Praesent non arcu in enim sagittis rhoncus.</p>
    <p>Fusce lorem nisi, feugiat ut, rutrum sit amet, porttitor vel, est. Proin a nunc vel augue blandit consectetur. Donec non urna. Fusce vel dui. Duis quis ante. Duis non orci. Nullam vestibulum dolor. Quisque vulputate porta lorem. Vivamus hendrerit. Vivamus quam. Mauris lacinia. Proin hendrerit. In hac habitasse platea dictumst. Morbi leo odio, porta in, tincidunt eget, sagittis nec, est. Ut imperdiet, lacus a luctus laoreet, arcu erat viverra quam, eget elementum dolor ipsum vel lectus. Ut ac urna et urna feugiat dictum. Phasellus bibendum eros scelerisque nunc. Donec at sem id ante sagittis ultricies. Morbi ut velit.</p>
    <p>Curabitur auctor commodo lectus. Phasellus augue justo, interdum vel, ultricies nec, venenatis sed, dolor. Donec et leo. Fusce leo velit, faucibus ut, aliquam quis, elementum in, nisl. Praesent nec nulla et ligula dapibus bibendum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus mollis. Aenean mauris nisi, imperdiet quis, placerat id, hendrerit in, purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum facilisis. Morbi vulputate odio non mi. Nulla facilisi.</p>
    <p>Maecenas quis turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In dignissim mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi pellentesque velit a elit. Quisque volutpat dictum lorem. Morbi quis felis. Etiam odio. Etiam faucibus, diam ac laoreet semper, elit tortor accumsan magna, quis mollis orci tortor malesuada odio. Aliquam pharetra. Nunc laoreet ullamcorper tortor. In libero. Praesent non nunc eget sem lobortis ultricies.</p>
  </div>
  <div id="bloc-2">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam est at lorem. Ut eget orci. Sed tortor. Sed sapien metus, vulputate a, ornare quis, faucibus id, libero. Quisque elementum lobortis orci. Aliquam vehicula. Suspendisse vestibulum tempor enim. Sed eu tortor eget mauris gravida volutpat. Morbi ornare, mauris nec aliquet commodo, eros magna interdum odio, sed dictum eros est id nisl. Proin varius leo sit amet neque. Aliquam elementum est et urna. Sed a ante id nunc consequat vehicula.</p>
  </div>
  <div id="bloc-3">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam est at lorem. Ut eget orci. Sed tortor. Sed sapien metus, vulputate a, ornare quis, faucibus id, libero. Quisque elementum lobortis orci. Aliquam vehicula. Suspendisse vestibulum tempor enim. Sed eu tortor eget mauris gravida volutpat. Morbi ornare, mauris nec aliquet commodo, eros magna interdum odio, sed dictum eros est id nisl. Proin varius leo sit amet neque. Aliquam elementum est et urna. Sed a ante id nunc consequat vehicula.</p>
    <p>Sed ligula augue, volutpat eget, vehicula sit amet, auctor non, velit. Nunc sodales blandit elit. Vestibulum et urna. Vivamus suscipit, ligula et fringilla tincidunt, turpis leo pellentesque erat, quis elementum est est id mauris. Pellentesque sem turpis, mattis sed, rhoncus quis, blandit vel, sem. Nulla sed nisi non lorem lobortis egestas. Suspendisse elit diam, iaculis a, dapibus in, vehicula a, dui. Nulla facilisi. Vivamus rutrum euismod nunc. Praesent non arcu in enim sagittis rhoncus.</p>
    <p>Fusce lorem nisi, feugiat ut, rutrum sit amet, porttitor vel, est. Proin a nunc vel augue blandit consectetur. Donec non urna. Fusce vel dui. Duis quis ante. Duis non orci. Nullam vestibulum dolor. Quisque vulputate porta lorem. Vivamus hendrerit. Vivamus quam. Mauris lacinia. Proin hendrerit. In hac habitasse platea dictumst. Morbi leo odio, porta in, tincidunt eget, sagittis nec, est. Ut imperdiet, lacus a luctus laoreet, arcu erat viverra quam, eget elementum dolor ipsum vel lectus. Ut ac urna et urna feugiat dictum. Phasellus bibendum eros scelerisque nunc. Donec at sem id ante sagittis ultricies. Morbi ut velit.</p>
  </div>
</div>

Nous lui appliquons d'ores et déjà une feuille de style, afin de fixer la largeur des trois éléments div adjacents et de leur attribuer chacun une couleur d'arrière-plan différente, afin que le résultat recherché soit bien visible.

#conteneur div {
  width: 200px;
}
#bloc-1 {
  background-color: yellow;
}
#bloc-2 {
  background-color: teal;
}
#bloc-3 {
  background-color: silver;
}

Soit dit en passant, rien ne vous empêche d'utiliser des unités relatives pour fixer la largeur des colonnes.

Des colonnes de même hauteur : un équivalent des cellules de tableau

La méthode la plus facile (et pas forcément la mieux respectueuse du balisage sémantique) pour créer des colonnes de même hauteur est de passer par un tableau en HTML. En effet, dans une même rangée, les cellules de tableau ont la même hauteur, quelle que soit la longueur de leur contenu, la hauteur adoptée étant, par défaut, celle nécessaire pour la cellule ayant le plus de contenu.

En CSS, il est tout à fait possible de faire qu'un élément qui ne soit pas un élément de tableau se comporte comme s'il en était un, grâce à la propriété display. Ainsi, pour qu'un élément qui n'est ni un th ni un td se comporte comme une cellule de tableau, il suffit de lui appliquer la propriété display avec la valeur table-cell. Ainsi, pour les trois div, nous appliquons la règle suivante :

#conteneur div {
  display: table-cell;
}

Et c'est tout ! En effet, les trois div adjacents s'affichent non seulement côte à côte, formant trois colonnes, mais ils ont la même hauteur, comme en témoignent leurs couleurs d'arrière-plan respectives, qui se répètent jusqu'à ce que, parmi les trois contenus, le plus long s'arrête. Il n'y a pas même besoin d'expliciter une hauteur, fût-elle fixe ou minimale. En somme, c'est une méthode très pratique, qui ne nécessite que peu de règles CSS et qui est testée avec succès sous Firefox 2 et 3, Opera, Safari, Konqueror et Internet Explorer 8.

Correctifs pour Internet Explorer 6 et 7

L'inconvénient est qu'Internet Explorer, jusqu'à la version 7, ne comprend pas display: table-cell. Pour cela, il faudra recourir à une recette plus classique, pour laquelle l'élément div conteneur (celui dont l'attribut id est "conteneur") est utile.

Nous créons une feuille de style ciblant les versions d'IE antérieures à la 8 (et appelée au moyen du commentaire conditionnel <!--[if lte IE 7]><![endif]-->). Dans cette feuille de style, nous recourons au positionnement flottant pour afficher les trois div adjacents côte à côte.

#conteneur div {
  float: left;
}

Étant donné que les éléments flottants débordent de leur élément conteneur et que tout élément suivant ledit conteneur risque d'épouser l'espace éventuellement laissé libre par les éléments flottants, nous allons créer un contexte de formatage, de façon à ce que les éléments flottants ne débordent pas de leur conteneur.

#conteneur {
  overflow: hidden;
}

Pour que ce contexte de formatage soit bien compris d'IE 6, il faut doter le conteneur d'un haslayout (pour en savoir plus sur ce concept propre à IE, supprimé à partir de la version 8, vous pouvez lire un article de Laurent Denis à ce sujet). À cette fin, une autre feuille de style supplémentaire (appelée au moyen du commentaire conditionnel <!--[if lte IE 6]><![endif]-->) comporte la règle CSS suivante :

#conteneur {
  height: 1%;
}

À présent que les colonnes s'affichent bien côte à côte et n'entraînent pas de bouleversement dans les éléments voisins, reste à faire en sorte qu'elles soient de même hauteur. Pour cela, nous reprenons la feuille de style qui cible les versions d'IE antérieures à la 8, à laquelle nous ajouterons la règle suivante : nous ajoutons une marge interne inférieure (padding-bottom) d'une très grande épaisseur, dont nous annulons l'effet par une marge externe inférieure (margin-bottom) négative de la même épaisseur.

#conteneur div {
  padding-bottom: 2000em;
  margin-bottom: -2000em;
}

J'ai choisi comme valeur 2000 em ; mais, rien ne vous empêche d'utiliser le pixel comme unité. En tout cas, le résultat recherché est au rendez-vous : les trois colonnes ont bel et bien la même hauteur. À noter que la technique de la double marge, interne positive et externe négative, ne marche que s'il y a un élément conteneur auquel on applique un contexte de formatage (en effet, sans l'overflow: hidden, le margin-bottom n'est pas appliqué).

Page de test

Vous pouvez consulter la page de test de création de colonnes de même hauteur en CSS pour avoir un aperçu du résultat sous votre navigateur.