Relative Footer with Absolute DIV Elements

Question

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.

Answer 1

try to change the footer's position to absolute and add bottom:0px; to footer's style

Answer 2

Are you clearing your floats?

Answer 3

The code your posted is not valid, try to add ";" after padding-top in the footer and see if it works.

#footer {
  height: 35px;
  margin-right: auto;
  margin-left: auto;
  width: 945px;
  position: relative;
  padding-top: 20px;
 }