The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Sticky Footer Method Re: Sticky Footer Method


I believe that on the base level, the page should have TWO elements. One is the footer, and one is all the rest (let’s just call it the “main block”). This main block needs to have a min-height of 100%, so that it pushes the footer all the way to the bottom of the screen.

However, you have a wrapper, and then three elements within that (including the footer, still!), so the basic structure won’t work there.

Here’s what I would suggest: first, move the footer OUT of the wrapper. I know you said you moved it out of it, but I still see it in there.
Then, give the #wrapper auto-height and min-height of 100%, as well as a bottom padding of 70px. And a clearfix, too.
Finally, give the footer a top-margin of -70px.