Relative Footer with Absolute DIV Elements

Posted by Alex on Stack Overflow See other posts from Stack Overflow or by Alex
Published on 2010-04-18T21:41:44Z Indexed on 2010/04/18 21:43 UTC
Read the original article Hit count: 510

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.

© Stack Overflow or respective owner

Related posts about css-layout

Related posts about css-positioning