[résolu] Problème de disposition

Bonjour et bonne année à tous !!
Je suis débutant et j'ai une question à propos des block : je veut obtenir une disposition de ce type : http://img151.imageshack.us/img151/2236/sanstitreus9.png
je code le tout comme sa :

<div id="corps_principal_de_la_page1">
	        <div id="corps_principal_de_la_page2">
			         <div id="menu_principal_gauche">
			         </div>
			         <div id="corps_de_la_page">
			         </div>        
                </div> 
</div>
et le css qui suit
#corps_principal_de_la_page1
{
	background-color: #FFFFFF;
	width: 1000px;
	border: 2px none #0000FF;
	background-image: url(bordure_corps.jpg);
	background-repeat: repeat-y;
	margin-right: auto;
	margin-left: auto;
}
#corps_principal_de_la_page2
{
	width: 976px;
	background-color: #FFFFFF;
	margin-right: auto;
	margin-left: auto;
	height: auto;
}
#menu_principal_gauche
{
	height: 200px;
	width: 200px;
	background-color: #00FF33;
	float: left;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
#corps_de_la_page
{
	height: 450px;
	width: 776px;
	background-color: #0066FF;
	float: left;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

voila sauf que je veut que les corps principaux 1 et 2 soit des blocs extensible en fonction de la taille des blocs contenants donc je n'ai pas mis de valeur height (j'ai essayé de mettre auto ) mais je me retrouve avec le bon résultat sur explorer mais pas sur firefox ou safari qui me donnent ce résultat :
http://img505.imageshack.us/img505/3122/sanstitreqr7.png
les 2 premiers block ne ce sont pas agrandi et je ne sais pas pourquoi ?
P.S : les couleur du dessins ne correspondent pas au CSS dsl
Merci a tous
Modifié par Francoisdu47 (04 Jan 2008 - 22:54)

Bonjour et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

Bonjour,

Francoisdu47 a écrit :
les 2 premiers block ne ce sont pas agrandi et je ne sais pas pourquoi ?

Il s'agit d'un problème classique rencontré pendant l'apprentissage du positionnement CSS. On pourra faire une recherche sur la notion de «dépassement des flottants».

Correctif rapide (mais se renseigner un peu plus sera utile!):

#corps_principal_de_la_page2 {overflow: hidden;}

Merci beaucoup j'ai compris >> les flottants ne repoussent pas les blocs ! ^^ J'ai trouvé une explication sur le site : http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/design-trois-colonnes-positionnement-flottant pour ceux qui veulent.

Je connais le site depuis peu et je trouve l'équipe formidable bravo !
Modifié par Francoisdu47 (04 Jan 2008 - 13:08)