I have a container DIV position:relative. Hold everything in it Then one left column one right column, classical layout. Both of them are absolute positioned inside this relative #Main. I want the right to be fluid so I say top: 0px; left: 280px; (left column width) right: 0px all works but bottom:0px does not work. I say height: 100% still nothing. It snaps to the edges in all of them except the bottom. Height of that div is always 1px or 0px. Only px values seem to work but that would be unusable. What is the reason to that? any leads? thx in advance ...
code is pasted below
HTML:
<div id="Main">
<div id="LeftSection">
<div id="Logo">
</div>
<div id="dvPanelMenu">
</div>
</div>
<div id="RightSection">
<div id="dvTopMenu">
</div>
<div id="dvLogin">
</div>
<div id="dvContent">
</div>
</div>
</div>
CSS:
body {
margin: 0px;
}
#Main
{
position: relative;
}
#LeftSection
{
position: absolute;
width: 280px;
height: 100%;
}
#Logo
{
position: absolute;
margin: 10px 0px 10px 30px;
}
#dvPanelMenu
{
position: absolute;
top: 140px;
left: 0px;
width: 280px;
height: auto;
text-align: left;
}
#RightSection
{
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 280px;
background-color: Blue;
}
#dvContent
{
position: absolute;
top: 36px;
left: 2px;
right: 0px;
bottom: 20px;
border: 1px dotted black;
}
#dvTopMenu
{
position: absolute;
top: 0.4em;
left: 20px;
}
#dvLogin
{
position: absolute;
right: 50px;
top: 0.4em;
font-family: Tahoma;
font-size: 11px;
text-align: left;
color: Teal;
}