Discussion :

[luna6]

Bonsoir,

Débutante en css, je voudrais savoir comment faire pour que mon menu de gauche contenu dans une div et le bloc contenu juste à coté qui est dans une autre div soit extensible ensemble selon le texte qui est dans le bloc contenu.

Si vous pouviez m'aider je vous en remercie d'avance.

Je vous montre pour le moment mon code css et html

Code css :

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
28
29
30
31
 
 
/****Menu de gauche****/
.menug{
	background:#dfdfdf url('../images/menu-bas.jpg') no-repeat right bottom;
	padding-top:75px;	
	float:left;	
	border-right:#d9d9d9 solid 1px;
	text-decoration:none;	
	font-size:13px;
	width:185px;
	margin-left:2px;
	}
 
/***contenu***/
 
#contenu{
	background-color:white;
	width:768px;
	float:right;
	}
 
/***footer**/
.footer{
	font-size:10px;
	background:url('../images/footerbas.gif') no-repeat bottom left;
	height:33px;
	width:955px;
	margin-left:1px;
	clear:both;
	}

Code html :

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
 
 
<div id="center">
<!--menu-->
<div class="menug">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
</div>
 
<div id="contenu">
</div>    
 
</div>

[Général03]

A mon avis utilise Javascript, essaye cela :

Code :

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

1
2
3
4
if(document.getElementById('contenu').style.height > document.getElementById('menu').style.height)
{
document.getElementById('menu').style.height = document.getElementById('contenu').style.height+"px";
}

En faite tu testes si la hauteur de ta div contenu est plus haute que celle de ton menu alors tu appliques cette hauteur à la div que j'ai appelé menu (qui correspond à son ID)

[12monkeys]

Ce que tu cherches à faire ce sont des colonnes factices, une petite recherche sur avec ces termes et tu trouvera ton bonheur...

[luna6]

Général03=> merci pour ton astuce, cependant elle ne fonctionne pas, je pense que je n'ai pas du bien mettre ton code dans le html...

12monkeys=> ok merci pour le terme exacte, ça m'a beaucoup aidé, j'ai chercher sur google, j'ai trouvé qu'il fallait faire un contexte de formatage !

Donc ma question est comment on réalise un contexte de formatage ? avec une div vide avec le propriété clear:left ?

Merci encore de vos réponses

EDIT: j'ai trouvé ma solution en mettant mes 2 blocs dans une div. merci beaucoup !