Sticky Footer Method

[mintertweed]

I am using a sticky footer method and it works just fine on my front page, but not so much on any of the other pages. Other than the front page, the only other page I have a design for at the moment is my contact page. It is all using the same stylesheet, so I am rather clueless as to why it is not working. The method I am using, uses this code for the main-column:

#main-column {
padding-bottom: 70px; /* Must be same height as the footer. */
}

And this code for the footer:

#footer {
margin-top: -70px; /* Negative value of footer height. */
height: 70px;
}

What am I missing? I am sure it is something terribly simple as usual. Thank you in advance!

Edit: I believe this is the site I originally got the concept from about a year ago.

[noahgelman]

There is more css in the example that you linked to than you have shown above. Do you have a link to the site?

[Senff]

I can’t really see where it went wrong originally because you gave the footer an absolute position, and like you said that’s messing things up a bit.

Having a footer and then have a div id="footer" within it, is a bit silly IMO. I think you were fine with the original code, but you might want to check if #main-column is cleared? Use a clearfix on that one (try giving it overflow:hidden; and see if that works.

[yeeyang]

A little confused on what ‘look’ you’re trying to go for but two things I could suggest.

If you’re looking to make sure that the footer is always at the bottom of your page, then you already have the footer absolutely positioned to the bottom. Just need to give the footer a positioning context of it’s parent. Add:

.page-wrap { position: relative }

You can take off the `min-height` as well from your `.page-wrap` as well and put a `overflow:hidden;` on your `#main-column` to allow your content to flow properly.

If you’re looking for a real sticky footer, you can just do a `position: fixed` to your footer and put a background color on `footer` so content flows behind it. I would just remember to put some padding at the bottom of your `.page-wrap` so that your footer has a place to live.

[Paulie_D]

If you are using the Sticky Footer method I am thinking of then the footer element should be OUTSIDE of the #pagewrap. then it will naturally come after any other element and the 100% heights and margins/padding etc. will do the rest.

http://codepen.io/Paulie-D/pen/aFpCu

[Senff]

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.

[Paulie_D]

With the method I gave there is NO requirement for positioning of any kind.

It’s all handled by 100% heights / margins & padding.

[Paulie_D]

On your front page the footer still has **position:absolute** applied.

Take that off and it will center.

On your contact page the footer is still in the wrapper.

[Senff]

I still see the footer within the wrapper. You’ll need to move it out of there.

Also, you can’t set the body as the “main block”, because you’ll need a footer at the SAME level as the main block. With the body as the main block, you’ll always have the footer WITHIN it.

[Paulie_D]

Well I did it in Chrome Developer tools and it did so that’s where that came from.

To center it on your front page you need to add

margin:0 auto;

As for the stickyness, then @Senff has covered that. The footer needs to be outside of the wrapper AFAIK.

[Author]

Posts