I am looking for a layout that includes a header, content, and footer.
My specific requirements include...
The footer Div should always be positioned at the bottom of the page, even if there is no content in the content Div.
When the content within the content Div expands, I want the entire body (including the header and footer) to expand accordingly.
I do not want to use position:fixed for the footer Div....
I have already experimented with some code in my project......
CSS:
body
{
height:100%;
margin-left: 0;
margin-top: 0;
padding:0;
width:100%;
position: relative;
display:block;
}
.container
{
display:table;
width:100%;
height:100%;
}
.header
{
top:0px;
height:75px;
width:100%;
}
.content
{
width:100%;
height:auto;
position: relative;
}
.footer
{
top:5px;
bottom:0px;
height:45px;
overflow:hidden;
width:100%;
}
CODE:
<div>
<div class="header">
Header Div
</div>
<div class="content">
Content Div
</div>
<div class="footer">
Footer Div(Need it,default at bottom position)
</div>
</div>
Any suggestions?
Note: I need this code to be compatible with IE as well......