Problème hauteur d'une div

Bonjour, je souhaite savoir si vous pouvez m'aider à trouver une solution a mon probleme.

(je risque de ne pas être assez clair mais je ferais de mon mieux ^^)

le probleme que j'ai est au niveau de l'affichage d'une div principale de mon site. La composition des div de mon site étant comme suite:

<div id="conteneur">
	<div id="haut">
			
	</div>
			
	<div id="centre">
		<div id="centre_gauche">
						
		</div>
		<div id="centre_droite">
				
		</div>
	</div>

	<div id="pied">	
	</div>
</div>

je souhaite que la taille de la div "centre" soit dynamique en fonction du contenu de la div "centre_droite" qui contiendra des articles afficher avec leurs commentaires.

mais le probleme c'est que la div du centre ne s'affiche pas, ya que les div du haut et bas qui s'affiche ainsi que les div centre_gauche et centre_droite qui saffiche au dessus du tout

le code du css est le suivant:

#page{
	background-image:url("../img/body.png");
	background-repeat: repeat;
	background-attachment:fixed;
}


#conteneur{
	position:relative;
	margin:auto;
	width:1050px;
	font-family:Verdana, Arial, Tahoma;
	font-size: 12px;
	top:30px;
	bottom:30px;
}
#haut{
	position:relative;
	margin:auto;
	width:1046px;
	height:174px;
	color : white;
	font-style:inherit;
	background:#202020;
	padding-left:5px;
	padding-top:5px;
	-webkit-border-radius:5px 5px 0px 0px;
	border-radius:5px 5px 0px 0px;
}

#centre{
	position:relative;
	width:1046px;
	height:auto;
	min-height:300px;
	background:#ffffff;
}


#pied{
	position:relative;
	margin:auto;
	width:1040px;
	background-color:#202020;
	color:#DCDCDC;
	font-family:Verdana, Arial, Tahoma;
	font-size: 10px;
	padding-top:5px;
	padding-left:5px;
	padding-right:5px;
	padding-bottom:10px;
	-webkit-border-radius:0px 0px 5px 5px;
	border-radius:0px 0px 5px 5px;
}


/**************************************
Haut de la page
**************************************/
#menu_haut{
	position:relative;
	margin:auto;
	width:auto;
	height:auto;
	color : #5F9EA0;
	float:right;
	right:10px;
	top:50px;
	font-family:Verdana, Arial, Tahoma;
	font-size: 12px;
	text-align:right;
	-moz-border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
}

/**************************************
centre de la page
**************************************/
#centre_gauche{
	position:relative;
	margin:auto;
	width:230px;
	height:200px;
	top:10px;
	bottom:10px;
	float:left;
	left:5px;
	border: 1px solid #20B2AA;
}
#centre_droite{
	position:relative;
	margin:auto;
	width:730px;
	height:600px;
	top:10px;
	bottom:10px;
	float:right;
	right:5px;
	border: 1px;
	border: 1px solid #20B2AA;
}

Merci d'avance pour votre aide

Salut,

Comme tu fais flotter (float) #centre_gauche et #centre_droite, il ne reste plus grand chose comme flux dans le parent #centre...

Plusieurs solutions sont possibles (de overflow à clearfix en passant par display).
A mon avis, histoire de bien maîtriser les comportements CSS de base, un peu de recherche et de lecture s'imposent !

tm

Bonjour,

Effectivement, les 2 éléments figurant dans #centre étant en "float", il n'y a plus rien dans le flux. Un petit clearfix s'impose.
Tu devrais trouver ton bonheur ici : http://www.alsacreations.com/article/lire/7-depassement-flottants-css.html

Pour mieux comprendre la notion de "float", voici un peu de lecture :
- http://www.alsacreations.com/article/lire/972-float-le-grand-bluff.html
- http://www.alsacreations.com/tuto/lire/608-initiation-positionnement-css.html

Petite remarque également sur les 2 éléments "#centre_gauche" et "#centre_droite". Le "margin:auto" n'est pas très utile ici et tu peux facilement remplacer les position:relative/top/left etc. par un simple "margin" :

#centre_gauche{
	width:230px;
	height:200px;
	float:left;
	border: 1px solid #20B2AA;
        margin:10px 0 20px 5px
}
#centre_droite{
	width:730px;
	height:600px;
	float:right;
	border: 1px;
	border: 1px solid #20B2AA;
        margin:10px 5px 10px;
}

Bon courage