Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Voilà un problème récurent au CSS : comment faire des colonnes de longueur égales
?
Prenons par exemple ce design :
Imaginons que je veuille que le menu et le corps soient toujours de même hauteur. Facile à faire avec des tableaux, mais avec des
div, c'est autre chose
. C'est pourquoi je vous propose ce tuto.
Dans un premier temps, nous mettrons en évidence le problème, puis nous verrons comment le résoudre.
Bon, motivés ? Alors, en route .
Tout d'abord, il faut savoir que les
div ne se comportent pas comme les cellules. Tandis que deux colonnes évoluent ensemble, les
div, eux, évoluent séparément.
Voici un petit exemple :
Exemple avec les tableaux
Dans cet exemple, les colonnes sont de même hauteur. Elles le resteront même si on agrandit ou réduit l'une d'elle : on dit qu'elles sont indissociables.
Maintenant, voyons le cas des
div (c'est là où ça va se gâter
) :
Exemple avec les div
Comme vous le voyez, les
div ont des hauteurs différentes (non jure
). Les
div, contrairement aux cellules de tableaux, évoluent séparément.
Nous allons maintenant pouvoir essayer de résoudre ce problème (j'ai bien dit essayer"
).
Et comment je règle ce problème, moi
?
En fait, il n'existe aucune propriété qui permet de résoudre ce problème (quoi ? Et on fait comment, nous ?
). 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é .
Pour arriver à résoudre ce problème, on va devoir tricher ('vous inquiétez pas, ce n'est pas méchant
).
Pour cela, on va utiliser 4
div : un qui contient nos
div et 3 autres (1 + 3 = 4
).
Commençons par créer nos 2 colonnes.
Nous allons créer 2 colonnes, chacune en
float. Ce devrait pas être trop dur.
Voilà le code que vous devriez avoir :
Code : HTML1
2
3
4
5 | <div id="colonne1">
</div>
<div id="colonne2">
</div>
|
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 2 colonnes par un
div que l'on appellera
conteneur. Voilà le code :
Code : HTML1
2
3
4
5
6
7
8
9 | <div id="conteneur">
<div id="colonne1">
</div>
<div id="colonne2">
</div>
</div>
|
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;
}
|
A notre
div conteneur, on mettra une image de fond (
background-image) qui permettra de donner l'impression que les colonnes continuent. Pour cela, on prend 1 capture d'écran (touche
Imp Ecr). On l'ouvre dans un logiciel de photo (Paint, ...). On prend ensuite une partie de l'image où on voit les 2 colonnes. Voici un exemple :
On enregistre cette image dans le dossier image de notre site. Il ne reste plus qu'à l'appliquer comme fond pour notre
div conteneur. Et voici le code obtenu :
Code : HTML1
2
3
4
5
6
7
8
9 | <div id="conteneur">
<div id="colonne1">
</div>
<div id="colonne2">
</div>
</div>
|
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 3
div : notre
conteneur puis nos 2 colonnes.
Avec ce code, le fond ne marchera pas. En effet, les colonnes étant en
float n'agrandissent pas le
conteneur. Pour cela, nous allons devoir utiliser un autre
div auquel on va appliquer la propriété CSS :
clear:both. Cette propriété a pour effet de placer le
div auquel elle s'applique en dessous des
div en
float. De ce fait, notre
div conteneur s'en retrouvera agrandi.
Voilà 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>
|
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 magie : les colonnes sont de la même hauteur
.
Voilà le résultat obtenu :
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
534 Zéros connectés |
8 requêtes |
0.3481s (0.3377s)
