Intégrer un DIV à l'interieur d'un DIV

Bonjour,
je n'arrive pas a trouver l'erreur.

j'ai un DIV principal "contener"

#contener {
	width:850px;
	background-color:#EEF3F9;
	height: auto;
	margin-right: auto;
	margin-left: auto;
	padding: 10px;
	display: block;
}

dans lequel je voudrais mettre deux autres DIV qui vont me permettre de créer deux colone gauche /droite

#page_contener_left{
	width:400px;
	height:auto;
	float:left;
	border-right-width: 1px;
	border-right-style: dashed;
	border-right-color: #999999;
	padding: 10px;
}
#page_contener_right{
	width:400px;
	height:auto;
	float:left;
	padding:10px;
	vertical-align: bottom;
}

lorsque je test, les deux div "left" et "right", se place par dessus le div "contener" et donc ne s'affiche pas a l'interieur du "contener" ????
savez vous pourquoi ? merci de votre aide

<div id="contener">
<div id="page_contener_left">
  <p>test</p>
</div>
<div id="page_contener_right">
  <p>test</p>
</div>
</div>

Créer un contexte de formatage:

#contener {overflow:auto}

Attention au passage à ne pas surcharger ta feuille de styles de propriétés inutiles (height:auto, display:block sur un élément block, …) et à bien comprendre le modèle de boîte: les paddings et les bordures interviennent dans le calcul de la largeur d'une boîte.

Hello,

je sais pas trop trop bien pourquoi ça fonctionne pas, mais fait gaffe au dimension que tu donne... je te donne ton code en "allégé..."

*{
	padding:0px;
	margin:0px;
}

#contener {
	background-color:#EEF3F9;
	height:250px;
	width:250px;
	padding: 10px;
	color:#FFFFFF;
}

#page_contener_left{
	width:100px;
	height:200px;
	float:left;
	background-color:#000066;
	padding: 10px;
}

#page_contener_right{
	width:100px;
	height:200px;
	float:left;
	background-color:#00FFFF;
	padding: 10px;
}

et le html:

<div id="contener">
	<div id="page_contener_left">
	  <p>test</p>
	</div>
	<div id="page_contener_right">
	  <p>test</p>
	</div>
</div>

en meme temps tu l'avais déjà ^^

heu sinon: comme a dis benjamin d.c. --> fait gaffe a pas mettre des truc inutile dans ton code !

et puis un conseil pour te retrouver, si tu donne les taille de ton bloque: place les a la suite !
-->
height: 200px;
width: 100px;

et ainsi de suite ! si tu as une suite logique dans tes divs, classe etc tu verras tout de suite s'il te manque quelque chose ou si tu t'es trompé dans des dimension !

Chum

P.S. si ca règle ton problème: oublie pas de mettre [RESOLU] devant le titre de ton sujet
Modifié par Chum (25 Jan 2008 - 09:08)