Div is getting cut off on long pages

I am having trouble figuring out why the dark gray div at the bottom of the page is getting cut off on long pages.

Long page: http://bit.ly/gLgj2Z

It appears just fine on short pages (albeit too high on the page).

Short page: http://bit.ly/gzUAUw

Is the sticky footer (the part in white at the very bottom which holds links and copyright info) causing the problem? I tried adding padding and borders in case this is a case of collapsing margins, but that didn't work.

I'm stuck.

EDIT: Okay, I just added a 30px bottom margin to #home-bottom-widgets and it seems to have worked. But I don't know if this is the correct solution. What will happen on other pages??

Quote:

---

I just added a 30px bottom margin to #home-bottom-widgets and it seems to have worked. But I don't know if this is the correct solution. What will happen on other pages??

---

Hi Susan,

That should work fine. I think you see what's going on here, you always need to soak up (account for) the footer height somewhere.

The same problem happens on short pages too when you reduce the viewport height.

What you did there was similar to this method which uses a bottom padding on an inner div that is the same height as the footer. That method is used when you pull the footer up with a negative top margin (as you have done).

Negative Margin Footer Pull Method

Another way is to pull the min-height:100% wrapping div through the top of the viewport with the negative top margin. In doing that the footer is at the bottom of the page but then the top content is getting clipped. To fix that you just add a top border to the first element in the wrapping div.

Top Border Soak Up Method

That is the method Paul has always preferred and I have come to appreciate too as it does not require the extra inner div. It resolves the problem at the top of the page and everything else will fall into place on it's own.

Thanks for the info, Ray. That helps. :)