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?
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?
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 .
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.
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 … )
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.
.
)