Yet another probleme de positionnement de div

Bonjour,
j'ai un problème de positionnement du div central de ma page, celui qui contient les données, la hauteur n'est pas fixe et s'il y'a une table qui contient plusieurs lignes il dépasse le div du dessous alors que ce dernier et les divs du corner gauche et droite reste à leur place: voilà le code:

voilà le code xhtml:

<!-- page ---->

<div id="pg" class="rich-page ">
<!--header -->
<div id="pg:hd" class="rich-page-header ">
....
</div>
<!--Contenu -->
<div id="pg:cnt" class="rich-page-content ">
<div class="rich-page-main">
<div class="rich-page-body ">
<div id="ctn" style="height: 100%;">
<div id="leftCor">\n\n </div>
<div id="rightCor"/>\n\n </div>
<div id="center_ctn" style="float: left; width: 98%; height: 100%;">
<div id="ctn_p" style="">
<div id="topPos"> top contenu </div>
<div id="mybody" style="border: 1px solid black; height: 1500px; width: auto; background-color: rgb(157, 254, 254);">\n \n </div>
</div>
</div>
</div>
</div>
<!-- footer -->
<div id="pg:ft" class="rich-page-footer ">

</div>

et le css:

.rich-page-content {
	
	height: 100%;
}

.rich-page-main {
	height: 100%;
	width: 100%;
	
	
}

.rich-page-body {
  
	height: 100%;
	width: 100%;
}

#leftCor {
	background: #FFFFFF url(../images/rn_fade_bg.gif) repeat-x
		scroll;
	float: left;
	width: 1%;
	height: 100%;
}

#rightCor {
	background: #FFFFFF url("../images/topcorner.gif") no-repeat;
	float: left;
	width: 1%;
	height: 100%;
}
#center_ctn {
	background: #FFFFFF url(../images/grn_fade_bg.gif) repeat-x
		scroll 0 0;
	float: left;
	width: 100%;
	height: 100%;
}

#ctn_p {
	width: 100%;
	height: 100%;
}

j'ai esasyé d'ajouter overflow:hidden au div du body, le div ne dépasse pas mais sa partie qui dépasse reste cachée.

voilà ce que ça donne en image;
Modifié par lmk (02 Dec 2009 - 14:05)

http://img12.imageshack.us/img12/8821/csstest.th.jpg

une idée sur ce problème?

Merci.

Salut,

Je pense que vu le peu de réactions des membres du forum, peut être serait-il plus sage de nous mettre une page en ligne pour constater le problème. Tu auras certainement plus de réactions. La il faut monter ton code dans des fichiers pour tester, ça en rebute plus d'un.

Mikachu a écrit :
Salut,

Je pense que vu le peu de réactions des membres du forum, peut être serait-il plus sage de nous mettre une page en ligne pour constater le problème. Tu auras certainement plus de réactions. La il faut monter ton code dans des fichiers pour tester, ça en rebute plus d'un.

j'ai fais un imp-écran pour que ce soit plus clair mais ce n'est pas réussi apparemment ..

On a tous les yeux sur la même image, mais dans une page, on peut tous regarder à des endroits différents. Ca fait souvent la différence.

Mikachu a écrit :
On a tous les yeux sur la même image, mais dans une page, on peut tous regarder à des endroits différents. Ca fait souvent la différence.

j'ai mis le fichier html et css en partage:
voilà le lien..
Modifié par lmk (23 Nov 2009 - 15:33)

toujours pas de réactions...

J'avais commencé à regarder, mais quand j'ai vu la multiple imbrication de divs, j'avoue avoir laissé tomber...
Tu ne peux pas faire plus simple pour arriver au même résultat ?

Ralf a écrit :
J'avais commencé à regarder, mais quand j'ai vu la multiple imbrication de divs, j'avoue avoir laissé tomber...
Tu ne peux pas faire plus simple pour arriver au même résultat ?

Il y'a des divs que je ne peux pas enlever, parce-que j'utilise yahou layouts.

j'ai fais cette modification:

.rich-page-content {

overflow:hidden;
}
.rich-page-footer {

clear:left;
}

mais en enlevant le height:100% de rich-page-content, ça fait disparaitre les deux divs latéraux leftCor et rightCor.
Modifié par lmk (25 Nov 2009 - 14:01)

re bonnour,

j'ai opté pour une autre méthode, ne pas utiliser des block en float, les divs gauche et droite n'ont pas de contenu, juste une image en background.

<div id="left">

<div id="righ">
<div id="center">

</div></div> </div>

et en css

#left {
	background: #FFFFFF url(./fade_bg.gif) repeat-x top left
		scroll;
    margin-right:99%;	
    width:1%;
}

#right {
	background: #FFFFFF url("./corner.gif") no-repeat;	

     padding-left:98%;     
     margin-right:1%;
	
#center {
	overflow: hidden;	

}

mais le deuxième div right ne semble pas accepter les %. quelqu'un a une idée comment positionner ces 3 divs avec les %; right et left de largeur 1%.

merci
Modifié par lmk (01 Dec 2009 - 11:00)

As-tu essayé un <div id="clear"></div> #clear { clear: both; } ?