Version en ligne

Tutoriel : Comment créer des colonnes de hauteurs égales ?

Table des matières

Comment créer des colonnes de hauteurs égales ?
Mise en évidence du problème
Résolution du problème

Comment créer des colonnes de hauteurs égales ?

Mise en évidence du problème

Voilà un problème récurrent en CSS : comment créer des colonnes de hauteurs égales ? o_O
Prenons par exemple le design ci-dessous :

Image utilisateur

Imaginons que je veuille que le menu et le corps soient toujours de même hauteur. C'est facile à faire avec des tableaux, mais avec des balises <div>, c'est autre chose. :) C'est pourquoi je vous propose ce tutoriel.

Dans un premier temps, nous mettrons en évidence le problème, puis nous verrons comment le résoudre.

Bon, motivés ? Alors en route ! :)

Mise en évidence du problème

Résolution du problème

Tout d'abord, il faut savoir que les balises <div> ne se comportent pas comme les cellules d'un tableau. Tandis que deux colonnes d'un tableau évoluent ensemble, les balises <div>, elles, évoluent séparément.
Voici un petit exemple :

Image utilisateur

Exemple avec les tableaux
Dans cet exemple, les colonnes ont la même hauteur. Elles resteront ainsi même si l'on agrandit ou l'on réduit l'une d'elles : on dit qu'elles sont indissociables.

Maintenant, voyons le cas des balises <div> (c'est là où ça va se gâter :p ) :

Image utilisateur

Exemple avec les balises <div>
Comme vous le voyez, les balises <div> ont des hauteurs différentes (non, jure… :D ). Contrairement aux cellules d'un tableau, leurs hauteurs évoluent séparément.

Nous allons maintenant essayer de résoudre ce problème (j'ai bien dit « essayer » :p ).


Résolution du problème

Résolution du problème

Mise en évidence du problème

Et comment puis-je régler ce problème, moi ? :o

En fait, il n'existe aucune propriété qui permet de résoudre ce problème (quoi ? Et comment fait-on, nous ? :euh: ). Attention, je n'ai jamais dit qu'il n'y avait aucun moyen : j'ai juste dit qu'il n'y avait aucune propriété. :D
Pour arriver à résoudre ce problème, nous allons donc devoir tricher (ne vous inquiétez pas, ce n'est pas méchant :D ).

Pour cela, nous allons utiliser quatre balises <div> : une qui contiendra nos balises <div> et trois autres (1 + 3 = 4 ).

Nous allons créer deux colonnes, chacune possédant la propriété CSS float:. Ça ne devrait pas être trop compliqué. :p
Voici le code que vous devriez utiliser :

<div id="colonne1">
</div>
 
<div id="colonne2">
</div>
#colonne1
{
   width:140px; 
   height:100px; 
   background-color:#0033CC; 
   float:left;
}
 
#colonne2
{
   width:140px; 
   height:60px; 
   background-color:#0033CC; 
   float:right;
}

Maintenant, nous allons englober nos deux colonnes par une balise <div> que l'on appellera conteneur. Voici le code associé :

<div id="conteneur">
 
   <div id="colonne1">
   </div>
 
   <div id="colonne2">
   </div>
 
</div>
#conteneur
{
   width:300px; 
   margin-top:20px; 
   padding-bottom:25px; 
   padding-top:5px;
}
 
#colonne1
{
   width:140px; 
   height:100px; 
   background-color:#0033CC; 
   float:left;
}
 
#colonne2
{
   width:140px; 
   height:60px; 
   background-color:#0033CC; 
   float:right;
}

À notre balise <div>conteneur, nous mettrons une image de fond (grâce à la propriété CSS background-image:) qui permettra de donner l'impression que les colonnes « continuent ». Pour cela, il suffit de prendre une capture d'écran (touche Imp Ecr), puis l'ouvrir avec un logiciel de retouche d'images (Paint par exemple). Il faut ensuite prendre une partie de l'image où l'on aperçoit les deux colonnes. Voici un exemple :

Image utilisateur

Il ne reste plus qu'à enregistrer cette image dans le dossier image de notre site, puis à l'appliquer comme fond à notre balise <div>conteneur. Et voici le code que l'on obtient :

<div id="conteneur">
 
   <div id="colonne1">
   </div>
 
   <div id="colonne2">
   </div>
 
</div>
#conteneur
{
   width:300px; 
   margin-top:20px; 
   padding-bottom:25px; 
   background-image:url(images/fond.jpg); 
   padding-top:5px;
}
 
#colonne1
{
   width:140px; 
   height:100px; 
   background-color:#0033CC; 
   float:left;
}
 
#colonne2
{
   width:140px; 
   height:60px; 
   background-color:#0033CC; 
   float:right;
}

Pour l'instant, nous avons trois balises <div> : notre conteneur puis nos deux colonnes.

Avec ce code, le fond ne fonctionnera pas. En effet, les colonnes ayant la propriété float: n'agrandissent pas le conteneur. Pour cela, nous allons devoir utiliser une autre balise <div> à laquelle nous devrons appliquer la propriété CSS clear:both. Cette propriété a pour effet de placer la balise <div> à laquelle la propriété s'applique en dessous des autres balises <div> ayant la propriété float:. De ce fait, notre balise <div>conteneur s'agrandira. :)
Voici le code :

<div id="conteneur">
 
   <div id="colonne1">
   </div>
 
   <div id="colonne2">
   </div>
 
   <div id="bas">
   </div>
 
</div>
#conteneur
{
   width:300px; 
   margin-top:20px; 
   padding-bottom:25px; 
   background-image:url(images/fond.jpg); 
   padding-top:5px;
}
 
#colonne1
{
   width:140px; 
   height:100px; 
   background-color:#0033CC; 
   float:left;
}
 
#colonne2
{
   width:140px; 
   height:60px; 
   background-color:#0033CC; 
   float:right;
}
 
#bas
{
   clear:both;
}

Et comme par magie, les colonnes ont la même taille. :D
Voici le résultat que vous devriez obtenir :

Image utilisateur

J'espère que vous avez bien compris ce petit tutoriel et que celui-ci vous sera d'une grande aide.
À bientôt peut-être pour de nouveaux tutoriels, et merci de me laisser des commentaires. :)


Mise en évidence du problème