Longueur d un panneau lateral = longueur de son conteneur

**ben.IT** · 27/07/2009, 13h19

Bonjour à tous, je débute en css. Pour m'exercer je souhaiterais réaliser une css, ou il y aurait 2 zones. Une zone 1 pour le titre et menu et une zone 2 pour le contenu.

Cette zone est composée de 2 éléments latéraux (elementg et elementd), ce que je souhaiterai, c'est que c'est 2 éléments aient la même longueur que leur conteneur, c'est a dire zone2. Lorsque j'affiche ma page, ils ne font a que une ligne de hauteur et je ne veux pas mettre une hauteur en pixel, pour que la hauteur des panneaux latéraux suivent celle du contenu.

Comment faire pour obtenir cela ??

code css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
#zone1 {
	height:150px;
	text-align:center;
	background-color:#00CCFF; /* bleu ciel */
	}
 
#zone2 {
	background-color:#FF6666; /* rouge */
	text-align:center;
	}
 
#elementg {
	float:left;
	width:140px;
	text-align:center;
	background-image:url(deg_g.png);
	}
 
#elementd {
	float:right;
	width:140px;
	text-align:center;
	background-image:url(deg_d.png);
 
	}

code html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
 
<div id="zone1">riri</div>
<br><br><br>
<div id="zone2">
		<div id="elementg">gauche</div>
		<div id="elementd">droite</div>
	bla blablalbalbla bla alb alblabla balba l balblalba l abl albl b albl b blba blabalblablal balb labl ab lab labl alblabl abl al
	balb albalbablabl bl blabl a ll abla b lab la blabla blab ab lalba l blablablalb albl  balblab l bl bl blal ba lb b b  b b blbalabl all
	b alb ab la lab alb ab lab lab lba lbalalbabl l blab lablab lab lab lb la blab la lba lb lab lbl b ablb lab alb alb lablab lba lab la al
 
</div>
 
</body>

merci d'avance

**ChristopheD** · 27/07/2009, 13h36

As-tu essayé de mettre une taille fixe a ta zone 2 (en pixel), puis de remplacer les tailles fixes de tes deux elements par des tailles dynamiques (en %) ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
#zone1 {
	height:150px;
	text-align:center;
	background-color:#00CCFF; /* bleu ciel */
	}
	
#zone2 {
        width:280px;
	background-color:#FF6666; /* rouge */
	text-align:center;
	}
	
#elementg {
	float:left;
	width:50%;
	text-align:center;
	background-image:url(deg_g.png);
	}
	
#elementd {
	float:right;
	width:50%;
	text-align:center;
	background-image:url(deg_d.png);
 
	}

**ben.IT** · 27/07/2009, 13h58

merci de ta réponse mais ce n'est pas un problème de largeur que je rencontre, ce que je souhaiterai c'est les panneaux latéraux aient la même hauteur que le contenu de la zone 2 comme sur ce schéma :

voici ce que j'obtiens :

comment faire pourque la zone contenant le degradé gris ait la meme hauteur que la zone2 (en rouge) contenant le contenu ???

Merci.

**Macmillenium** · 27/07/2009, 16h26

Bonjour,

Rajoute un 3éme conteneur #elementc doté de contexte de formatage block afin de calculer sa position par rapport à ses deux adjacents flottants (overflow:hidden fera l'affaire) :

Code xhtml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
		<div id="elementg">gauche</div>
		<div id="elementd">droite</div>
		<div id="elementc">
		bla blablalbalbla bla alb alblabla balba l balblalba l abl albl b albl b blba blabalblablal balb labl ab lab labl alblabl abl al
		balb albalbablabl bl blabl a ll abla b lab la blabla blab ab lalba l blablablalb albl  balblab l bl bl blal ba lb b b  b b blbalabl all
		b alb ab la lab alb ab lab lab lba lbalalbabl l blab lablab lab lab lb la blab la lba lb lab lbl b ablb lab alb alb lablab lba lab la al
		</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
#elementc { overflow:hidden }

Ensuite, pour que cela fonctionne sous IE6 et versions inférieurs, faudrait donner le Layout à #elementc via un zoom:1 par exemple et annuler l'overflow:hidden :

Code xhtml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<!--[if lte IE 6]>
<style type="text/css" media="screen">
	#elementc { 
		zoom:1;
		overflow:auto;
	}
</style>
<![endif]-->

Le commentaire conditionnel est à placer avant </head>.

**ben.IT** · 27/07/2009, 23h17

Bonjour et merci de ta réponse,
j'ai intégré tes modifications au code mais cela n'a rien fait de plus, les éléments latéraux n'occupent pas la même hauteur que l'élément central...