layouts height problem

[lmk]

hi all,

Im using rich:page, layouts, with Facelets, dont know if I have to update layout classes in order to keep the body content of the page always inside the parent layouts, I have rich:panel inside wich is longer than the parent div and it the page content overpass the footer.

[ilya_shaikovsky]

please show the code snippets and css classes applied.

[lmk]

xhtml code:

<rich:page xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:rich="http://richfaces.org/rich"
 xmlns:a4j="http://richfaces.org/a4j" markupType="xhtml"
 contentType="text/html" id="pg">
 <f:facet name="pageHeader">
 <h:panelGroup>
 <link rel="stylesheet" type="text/css" href="./style/styles.css" />
 <link rel="stylesheet" type="text/css" href="./style/tabpanel.css" />
 <link rel="stylesheet" type="text/css" href="./style/template.css" />
 </h:panelGroup>
 </f:facet>
 <f:facet name="header">

 </f:facet>
 <f:facet name="footer">

 <h:panelGroup>
 <div class="rounded" style="background-color:#FFFFFF;"></div>
 <h:outputText value="Fooooter" />
 </h:panelGroup>
 </f:facet>

 <div id="ctn" style="height:100%;">

 <div id="leftCor">

 </div>
 <div id="rightCor" ></div>

 </div>

 <div id="center_ctn" style="float: left; width: 98%;height:100%;">
 <rich:layout id="ctn_p">
 <rich:layoutPanel id="topPos" position="top">

 <h2>title</h2>

 </rich:layoutPanel>
 <rich:layoutPanel position="bottom">

 <div>

 <div style="padding-left: 50px;"><ui:include
 src="user_identity.xhtml" /></div>
 </div>



 <div id="mybody" style="height:1500px;width:auto;border: 1px solid black;background-color: #9DFEFE;">
 <!-- div only for test it replaces insert body -->
 </div>

 </rich:layoutPanel>
 </rich:layout>
 </div>

</rich:page>

and css code:

.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%;

}

thanks!