Tô tentando dividir o meu template para que as páginas fiquem dessa forma:
[img]http://img691.imageshack.us/img691/5128/bottomduvida1.png[/img]
mas quando o left é maior que o left_content, o bottom cobre:
[img]http://img684.imageshack.us/img684/1931/bottomduvida2.png[/img]
E o contrário não acontece:
[img]http://img7.imageshack.us/img7/1222/bottomduvida3.png[/img]
Aqui vai meu cssLayout.css:
#top {
position: relative;
background-color: #ffffff;
color: black;
padding: 5px;
margin: 0px 0px 10px 0px;
}
#left {
float: left;
background-color: #ffffff;
padding: 5px;
width: 150px;
}
#right {
float: right;
background-color: #036fab;
padding: 5px;
width: 150px;
}
.center_content {
position: relative;
background-color: #dddddd;
padding: 5px;
}
.left_content {
background-color: #ffffff;
padding: 5px;
margin-left: 170px;
}
.right_content {
background-color: #dddddd;
padding: 5px;
margin: 0px 170px 0px 170px;
}
#bottom {
position: relative;
background-color: #c2dfef;
padding: 5px;
margin: 10px 0px 0px 0px;
}
#top a:link, #top a:visited {
color: white;
font-weight : bold;
text-decoration: none;
}
#top a:link:hover, #top a:visited:hover {
color: black;
font-weight : bold;
text-decoration : underline;
}
Aqui tá o código do template:
<h:body>
<div id="top">
(conteúdo do Top)
</div>
<div>
<div id="left">
(conteúdo do Left)
</div>
<div id="content" class="left_content">
<ui:insert name="content">
(conteúdo do Left_Content)
</ui:insert>
</div>
</div>
<div id="bottom">
(conteúdo do Bottom)
</div>
</h:body>
