Question

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

It may sound obvious but related elements are positioned relatively to their normal position and absolute elements are positioned “to the first parent element that has a position other than static”.

Your footer is positioned relatively, so it tries to find the closest previous element’s bottom. The nearest relative element is content, so you footer is placed right under the bottom of this div (you cannot see #content because of white background of header). Content div is also positioned relatively, and the closest relative element is #container, which also has no height.

Why do you need header and nav bar to be positioned absolutely? Do you need them in the middle of the screen? Then I can suggest placing them in separate div, with margin: 0 auto;.