Relative Footer with Absolute DIV Elements
- by Alex
Hi,
I'm creating a wordpress theme where the header and the nav bar are positioned absolutely, and the footer needs to be positioned relatively depending on the height of the content on each page. When I try to set the footer's positioning to relative, however, it appears at the top of the page underneath the content. All elements are in a relatively positioned container. Is there any way to fix this, or to dynamically get the height of the content plus the header and nav bar?
The structure of the page is as follows:
<div id="container">
<div id="header">
</div>
<div id="navbar">
</div>
<div id="content">
Dynamically generated and variable height content here.
</div>
<div id="footer">
</div>
</div>
And the relevant css is:
#container {
position: relative;
margin:0px auto;
width: 945px;
text-align: left;
}
#header, #navbar{
background-color: #FFFFFF;
position: absolute;
margin-right: auto;
margin-left: auto;
width: 945px;
float: left;
}
#footer {
height: 35px;
margin-right: auto;
margin-left: auto;
width: 945px;
position: relative;
padding-top: 20px
}
Thanks for the help.
