Kablam Kablam - 1 year ago 73
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.

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download