28173 sujets

CSS et mise en forme, CSS3

Adapter la hauteur d'un <div> en fonction d'un autre <div

Salut a tous,

J'ai un probleme pour la mise en forme d'une page, j'aimerais que la hauteur d'un conteneur s'adapte en fonction du contenu d'un autre.

http://img153.imageshack.us/img153/4110/cssud7.jpg

code de la css:

#header {
	height: 180px;
	background-color: #EBF0F1;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #999999;
	
}
#haut {
	height: 48px;
	left: inherit;
}
#conteneur {
	position: relative;
	width: 785px;
	border: 1px solid #999999;
	background-color: #F4F4F4;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	height: auto;
}

#contenu {
	position:absolute;
	left: 143px;
	top: 267px;
	width: 608px;
	height: auto;
	border: 0.2mm solid #CCCCCC;
	background-color: #FFFFFF;
	padding: 10px;
}
#centre {
	background-color:#F4F4F4;
	height: auto;	
}
#gauche {
	position: absolute;
	left:5px;
	width: 130px;
	height: 171px;
	top: 309px;
	background-color: #F4F4F4;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #FFFFFF;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	border-left-color: #FFFFFF;
	font-family: "Trebuchet MS";
	font-size: 11px;
}
#pied {
	height: 40px;
	background-color: #EBF0F1;
	border-top-width: 0.2mm;
	border-right-width: 0.2mm;
	border-bottom-width: 0.2mm;
	border-left-width: 0.2mm;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #999999;
	border-right-color: #999999;
	border-bottom-color: #999999;
	border-left-color: #999999;
}


Je voudrais que la hauteur du conteneur "centre" s'adapte en fonction du contenu du conteneur "contenu"

Le code html:

<body>


<div id="conteneur">

	  <div id="header">
	    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-...        </object>
	  </div>

	  <div id="haut">
	     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"...         </object>
	  </div>
	  
               <div id="gauche">
	    <p align="right">
	  	  <a href="">Qui Sommes-nous?</a><br />
	  	  <br />
	  	  <a href="">Devenir Indépendant</a>  <br />
		    <br />
	      <a href="">Primes pour les commerces</a>   <br />
		    <br />
		  <a href="">Menu 4</a>
		    <br />
		</p>
  </div>
  
               <div id="centre">
	  <div id="contenu">
	 	
</div>
</div>
	

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


Si Qulequ'un pouvait me donner un solution ce serait sympa !

Merci d'avance !
Modifié par goblinks (15 Nov 2006 - 11:47)
J'ai le même problème, il y a un tutoriel sur Alsa, je ne l'ai pas encore testé, je ne sais pas si ça résoud ce problème particulier.
Sujet clos
Aller à