Forums

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

#123619
yeeyang
Participant

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.