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: 516
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