How do I get my footer to sit at the bottom...?

Need a div which makes space at the bottom of the main page (inside the #wrap div). Then, the footer (being inside #wrap) can be placed in that space by using absolute positioning. Like this :
CSS body, html {
height:100%;
}
body {
margin:0;
padding:0;
}
#wrap {
position:relative;
width:780px;
margin:auto; min-height:100%;
}
* html #wrap {
height:100%;
}
#clearfooter {
height:50px;
overflow:hidden;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:50px;
}

HTML
<div id="wrap">
...content goes here...
<div id="clearfooter"></div>
<div id="footer">Footer</div>
</div>

0 comments: