Aller au menu - Aller au contenu

Icône Comment créer des colonnes de hauteurs égales ?

Par Finality
Mise à jour : 22/08/2008
102 visites depuis 7 jours, classé 563/786
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 ! :)
Retour en haut
Sommaire du tutoriel :
Icône du chapitre
Retour en haut

Mise en évidence 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 ).
Retour en haut

Résolution 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 ).

Commençons par créer nos deux colonnes.

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 :
Code : HTML
1
2
3
4
5
<div id="colonne1">
</div>
 
<div id="colonne2">
</div>


Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
#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é :
Code : HTML
1
2
3
4
5
6
7
8
9
<div id="conteneur">
 
   <div id="colonne1">
   </div>
 
   <div id="colonne2">
   </div>
 
</div>


Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#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;
}


Maintenant, nous allons voir comment tricher. :)

À 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 :

Code : HTML
1
2
3
4
5
6
7
8
9
<div id="conteneur">
 
   <div id="colonne1">
   </div>
 
   <div id="colonne2">
   </div>
 
</div>


Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#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;
}


La manipulation suivante est très importante.

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 :
Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<div id="conteneur">
 
   <div id="colonne1">
   </div>
 
   <div id="colonne2">
   </div>
 
   <div id="bas">
   </div>
 
</div>


Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
#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
Retour en haut
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. :)
Retour en haut

Partager

Retour en haut
38 commentaires pour "Comment créer des colonnes de hauteurs égales ?"
Note moyenne : 3.25 / 4 (4 votes)
Pseudo Commentaire
Hors ligne KorangaR # Posté le 21/10/2008 à 19:51:59

Un peu plus de pragmatisme ne te ferait pas de mal Torajio Bangani, non ce n'est pas parce qu'un site est fait en tableaux qu'il est forcément difficile de naviguer avec une assistance orale, et ce genre de sites n'est pas non plus banni du référencement (ca se saurait qd même, vu tous les sites fait en tableaux très populaires...).

Apart ça jne vais pas répéter ce qui a déjà été dit, le tuto se présente comme solution générique alors qu'il y a pas mal de limitations, il y a aussi des div inutiles tel le fameux div clear (un simple overflow:hidden sur le div conteneur aurait été suffisant).

Dommage que les tableaux en CSS ne soient pas présentés ainsi que les colonnes CSS (columns, column-width etc.) qui sont bien plus puissants malgré les problèmes d'implémentation.
Hors ligne anonyme # Posté le 11/01/2009 à 21:52:37

Pour un design très basique, ça marche très bien. Merci de l'astuce.
Hors ligne Tahmahal # Posté le 04/04/2009 à 15:29:33
Orassia !
Avatar

 Je trouve vraiment dommage que des tutos comme celui-ci restent :(

Je ne dénigre pas l'auteur, il y a un vrai travail de présentation, etc. Mais la technique est vraiment pas top et il y en a d'autres ...

C'est comme un panneau qui pointe dans une mauvaise direction au début de l'apprentissage de certains. Et finalement on a les personnes comme un message disant que faire avec les tableaux, c'est mieux car ça s'affiche correctement.

Et puis les nouveaux navigateurs commencent à intégrer des choses comme display: table-cell ... qui règlent tout ça.

Image utilisateur
 
Hors ligne yadelavie # Posté le 30/06/2010 à 17:03:24

Bonjour,

Je suis totalement débutante en la matière.... ceci dit j'ai suivi méticuleusement le cours de Mathéo. Et j'en viens maintenant à tenter de découvrir des petites astuces.

Je ne comprends pas des masses l'utilité de ce tuto.

j'ai essayé ça marche c'est une chose....c'est déjà une bonne nouvelle; mais alors je ne comprend pas du tout comment avec cette technique on en arrive à un tel résultat.

Pourquoi ne pas mettre directement des hauteurs similaires aux colonnes ???
Il doit y avoir quelque chose qui m'échappe !!!! merci

Yadelavie
Hors ligne Mistermoon69 # Posté le 24/05/2011 à 17:49:57

Déçu... Ce n'est pas un tuto mais de l'astuce. Disons que cela peut servir pour des sites très simples mais çà n'ira pas plus loin... Je suis débutant et j'attends du SDZ d'apprendre des vrais tutos propres. Pour l'alignement des colonnes, je conseille plutôt le tuto sur le design extensible de Bob où là vous apprendrez des scripts nickels! Je ne mettrais pas de note pour ne pas te décourager. Continue tout de même...

Voir tous les commentaires
Ce tutoriel a été corrigé par les zCorrecteurs.