Kablam Kablam - 6 months ago 24
CSS Question

Footer isn't sticking to bottom though I have it coded

I removed the footer for the time being, site had to go online. So the link is gone as well.

As you can see (in FF2 as well as in IE7) the footer is at the bottom of the SCREEN, but not at the bottom of the page (content).

I have this in my code:

<div id="wrap">
<div id="top"></div>
<div id="content"></div>
<div id="footer"></div>

and this in the css:

html {
height: 100%;
margin: 0;
padding: 0;
body {
height: 100%;
margin: 0;
padding: 0;
padding-bottom: 30px; /* height of the footer */
#wrap {
margin-left: auto;
margin-right: auto;
width: 960px;
min-height: 100%;
position: relative;
*#wrap { /* IE hack */
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
padding: 0;
margin: 0;

Or, making a long story short: I followed the instructions given here.


Right, so with the #size inside the 100%, take the padding off the wrap and add the following to the #content


then your link works for me in FF