Force Footer to Be On Bottom

I’ve tried to force my footer to stay at the bottom of the screen by creating a container around the site’s content with a relative position and then absolute positioning the footer to stay on the bottom and creating padding on the content container respective to the footer’s height. But the footer still seems to be ‘moving’ to the center of the desktop screen. The only pages that seem to be affected by this ‘defect’ are the Gallery pages.

So what is causing the footer to move with the gap on the bottom?

I think the footer needs to be outside the Content, not contained inside as you have it now.
– Cordially, David

Mr. Toad,

Your page is a bit tall for so little content. Do you want a “sticky” footer that sticks to the bottom of the window if the page has little content and is pushed down below the bottom of the window if the page has a lot of content? OR do you want a “fixed” footer that is fixed to the bottom of the window at all times?

Greetings, ronpat:

Either! I’d like to see both options.

Thank you, ronpat.

Here’s a sticky footer compliments of @PaulOB (Paul O’Brien) .

I’ll look around for a fixed footer, but no promises.

StickyFooter-20141101=Paul.html|attachment (2.2 KB)

Thank you, ronpat and Paul O’Briend. Checking it out now!

Well that just made things even funkier.

How’s that?

The Footer is not at full width and there still lies a gap below the footer.

The html,body{} rule…the HTML text has a typo. Fix that.

Other than that, Ron should be able to point to point you out the errors he has with the sticky footer method :slight_smile: .

If Ron is trying to emulate this foooter

There is a lot of code missing that should be there. I’m not sure what method Ron was trying to do though so I’ll let him chime in. He knows what he’s talking about so I’m sure there’s a reason behind this :slight_smile: .

I wouldn’t use that version as it was made before the days of RWD. The only version I use these days is this one.

It’s simple and foolproof and works for responsive design and doesn’t need ‘magic numbers’.


I went to your website to find the newest sticky footer and that one I linked to is still marked as the “ultimate” one.

Making your example fluid wouldn’t be too much work so I figured that’s why you never updated it.

Where is this new sticky footer?

Yes, I.m afraid I haven’t updated that site for quite a wjile :smile:

I started putting newer demos on codepen but I will eventually update the old site.

It’s impossible to make the old version fluid and still work properly because the space for the footer must always be accounted for with an exact height or it just doesn’t work which is why its no good for fluid layouts where text wraps.

The display:table version needs no fixed heights for the footer, no pushers, no negative margins and content can be as small or as tall as needed.


Ah, I meant in terms of responsive (width) and not the height - yes of course you are right.

Some of your 3column demos appear to be 1px too wide for me; meant to e-mail you about them a while ago but never got around to it.

They ought to be archived now as most are historic. My stuff always get left to last but I will get around to it this year.:slight_smile:


Try with

position: fixed;
bottom: 0px;

Make it a child of the body element.


That will work with the exception of certain screen sizes. Some users will not be able to completely scroll through the site because the footer would block the content area.

Yes that’s the problem with “fixed positioned” footers and they are only really useful for very small height footers with no wrapping text where you can add some padding-bottom to the bottom of the layout so that the content will scroll above the footer.

A sticky footer is a better approach if you want content at the bottom of the window on small documents or at the bottom of the document when content is below the fold.

If all you want is a simply copyright message fixed to the bottom of the window then fixed positioning is ok but for anything larger then I would recommend a sticky footer (or just a normal footer).

Normal footer for the win! I prefer to set the body background color to the color of the footer, and then you never get the white gap at the bottom. KISS (keep it simple, sunshine … :stuck_out_tongue: )

Thank you, gentleman. I wound up changing the body background color to the footer color and creating a separate div with a background image, positioning it absolute so the ‘dog’ image would stay at the bottom left.

Great input from Sitepoint! Thank you, gents!