28173 sujets

CSS et mise en forme, CSS3

Hauteur de DIV relative

Bonjour,

Voila mon problème :

J'ai une div #contenu_principal qui contient deux div :

#left
#center

left contient le menu de gauche et
center contient le contenu de la page

je n'arrive pas à régler la hauteur de ces deux div pour quelles viennent jusqu'en bas de contenu_principal.

Si je fixe #contenu_principal à height: 900px par exemple ca fonctionne avec left et center à 100%
mais la hauteur de #contenu_principal doit pouvoir varier. or en la mettant à 100% ca ne fonctionne plus ...

voici le lien : http://atlantiqueinformatique.com/falnax/index.php

Merci d'avance
Je complète un peu :

Le code html :


<div id="bandeau">
		<div id="menu">	
			<div id="flash_menu"></div>
		</div>
	</div>


	<div id="contenu_principal">

		<div id="left">
			<?php mosLoadModules('top');?> 
		</div>

		<div id="center">
			<?php mosMainBody();?>
		</div>

	</div>


	<div id="footer_menu">
		<p><?php mosLoadModules('left');?></p>
	</div>



Et le CSS :


#bandeau {
	position:relative;
	background: url(../images/bandeau.jpg) no-repeat center left;
	width:900px;
	height:300px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	z-index:1;
	border-left: 1px solid #424755;
}

#contenu_principal {
	position: relative;
	width: 900px;
	height: 900px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

#left {
	background-color: #d8d8d8;
	width: 200px;
	height: 100%;
	float: left;
	border-left: 1px solid #424755;
	border-right: 1px solid #424755;
	padding-top: 100px;
	padding-bottom: 0px;
}

#center {
	background-color: #ffffff;
	width: 698px;
	height: 100%;
	float: left;
}

#menu {
	position:absolute;
	width:200px;
	height:250px;
	left: 0px;
	top: 99px;
	z-index:4;
	background: #d8d8d8;
}

#footer_menu { 
	position: relative;
	width: 899px;
	height: 30px;
	background-color: #E4E5E8;
	border-top: 1px solid #424755;
	border-bottom: 1px solid #424755;
	border-left: 1px solid #424755;
	border-right: 1px solid #424755;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	vertical-align: middle;
	padding-bottom: 0px;
}

#footer_menu p { padding-left: 0px; font-size: 11px; width: 705px; }
#footer_menu p a { color: #061744; }

#footer_copy { 
	position: relative;
	width: 900px;
	height: 48px;
	background: url(../images/bg_footer_copy.gif) repeat-x top left;
	border-top: 1px solid #fff;
	float: left;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
Tu ne pas indiquer une hauteur en pourcentage archimede .
Tu ne peux pas avoir un design extensible avec des element floatté a l'interieur. enleve les tailles de tes div left et center ds un 1er tps.
Ensuite toujours la interieur de la div conteneur principal tu crée une nouvelle div ex: <div style="height:1px;clear:both; padding-bottom:20px;"></div>
La propriété clear et sa valeur both te permettre d'avoir ton design extensible.
Sujet clos
Aller à