Kablam Kablam - 2 months ago 6
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>
</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 */
height:100%;
}
#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.

Answer

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

overflow:auto;
padding-bottom:30px;

then your link works for me in FF