Page layout problem
Hi,
I am designing a page which has header, conainer(3 columns) and footer.
Header is ok. container(body) is displaying 3 columns. But the footer is displaying just below the body. Its fair when the body content is large. If the body content is less, footer coming to middle of the screen. I want to display the footer at the bottom only.
I have put container div wit height as 100% but its not applying. If I give in pixels, it is fair. But I want to give in % coz to fit in any resolution.
My css is as below
body
{
margin:0; font-family:Arial,verdana, helvetica Sans-Serif; font-size:78%;
}
#container
{
width:99%; margin:1px; border:1px solid gray; background-color:#D3D3D3; height:320px;
}
#leftcol
{
background-color:#ffF; font-size:10px; height:100%;
border-style:solid; border-width:1px; border-color:#c0c0c0;
float:left; width:14%; padding:1em; padding-top:2px; margin-top:2px;
}
#centercol
{
background-color:#FFFFFF; width:69%; float:left; padding-left:2px; padding-top:2px; height:100%;
border-style:solid; border-width:1px; border-color:#D3D3D3; margin-left:2px; margin-top:2px;
}
#centercolcontent
{
padding:15px 6px 15px 6px;
}
#rightcol
{
font-size:10px; color:#000; background-color:#fff; height:100%;
width:14%; float:right; border:1px solid gray; padding-top:2px; margin-top:2px;
}
#header
{
padding:0; margin:2; width:100%; height:120px;
}
#header2
{
padding:0; margin:0; width:99%; height:120px; padding-top:8px; border-style:solid; border-width:0px;
}
#headermenu
{
position:absolute; top:93px; left:1px; width:99%; padding:1px;
background-color:#FFFFFF; height:25px; vertical-align:middle; text-align:center;
border-color:#00BFFF; border-width:1px; border-style:solid;
}
#innerMenu
{
margin-left:20%; background-color:#FFFFFF; height:25px; padding-top:0px; text-align:center;
}
#breadcrumb
{
background-color:#202020; color:#FFFFFF; padding:3px; font-size:10px;
}
#footermenu
{
text-align:center; padding-top:10px;
}
#footer
{
padding:0px; width:100%; height:62px; background-color:#FFFF00; clear:both; margin-bottom:5px;
}
.footermenulink
{
font-family:Arial; font-size:10px; font-weight:bold;
}
#footertext
{
text-align:center; padding-top:10px;
}
.headermenulink
{
font-family:Arial; font-size:11px; font-weight:bold; text-align:center;
}
|
