Div qui s'agrandis en fonction d'une autre

Bonjour à tous.

Dans ma mise en page en div, je souhaiterais que mon "menuGauche" ce mette à la bonne hauteur, en fonction d'un contenu [B]variable[/B] qu'il y aura dans le menu à droite.

Voici le rendu "QUI MARCHE" sur IE :

[URL=http://imageshack.us][IMG]http://img159.imageshack.us/img159/8149/ietestqc4.jpg[/IMG][/URL]
[URL=http://g.imageshack.us/img159/ietestqc4.jpg/1/][IMG]http://img159.imageshack.us/img159/ietestqc4.jpg/1/w502.png[/IMG][/URL]

Malheureusement sur firefox, voila le rendu :

[URL=http://imageshack.us][IMG]http://img515.imageshack.us/img515/412/fftestvd5.jpg[/IMG][/URL]
[URL=http://g.imageshack.us/img515/fftestvd5.jpg/1/][IMG]http://img515.imageshack.us/img515/fftestvd5.jpg/1/w501.png[/IMG][/URL]

Et voici mon code :
HTML

<div id="container">
	<div id="header"> </div>
		
	<div id="ensemble">
		<div id="menuGauche"> 
			<div id="menuGauche_contenu"> </div>
		</div>
		<div id="menuDroite"> 
			<div id="menuDroite_contenu">Contenu </div>
			<div id="menuDroite_contenu">Contenu </div>
			<div id="menuDroite_contenu">Contenu </div>
			
		</div>
	</div>
	<div id="footer"> </div>	
</div>

CSS

body {
margin:0;
padding:0;
text-align:center;
}

div#container {
background-image:url(../images/filetDegrade.jpg);
padding:0 px;
width:970px;
overflow:hidden;
margin-left:auto;
margin-right:auto;
}

div#header {
width:940px;
height:100px;
margin-left:auto;
margin-right:auto;
background-color:black;
}


div#ensemble {
width:940px;
background-color:green;
margin-left:auto;
margin-right:auto;
height:100%;
}
/*
//////// ICI TOUT MENU GAUCHE ET MENU DROITE SONT DANS LA DIV "ENSEMBLE"
*/

div#menuGauche {
width:200px;
height:100%;
float:left;
background-color:red;
}
div#menuGauche_contenu {
width:200px;
height:50px;
}

div#menuDroite {
width:500px;
float:right;
background-color:red;
}
div#menuDroite_contenu {
width:500px;
height:100px;
background-color:blue;
border:1px solid #FF00D8;
border-color:red;
}


div#footer {
width:940px;
height:25px;
margin-left:auto;
margin-right:auto;
background-color:black;
clear:both;
}

Avec Firefox, quand je met ma div ensemble avec un height à 100% il descend tout en bas de la page.

Je n'ai pas ce prob sur IE.

Si vous avez une idée je suis preneur !
Merci de votre aide !

@++

Bonjour

Fais une recherche sur les "colonnes factices", celà devrait résoudre ton problème.

Hello,

Les colonnes factices devraient faire l'affaire, effectivement. Et tu pourras (et peux déjà) supprimer tes height: 100%, qui ne servent strictement à rien.