Sticky Footer for Magento: the Cut & Paste solution (CSS only!)

When designing a webshop, you will always have pages that contain lot less content then other pages. In Magento for example, you'll have pages like customer login, contact, forgot password, search terms, 404 (noRoute) etc, which just don't fill your page enough. As a result these pages end up with a strange looking page with a footer filling 40% (or more, depends on the resolution of your workspace) of the physical space. This doesn't make sense - the footer isnt thát important - and personally, I think it looks bad.

So, If you may well know a nice way around this is to create a sticky footer. In other words, make your footer always stick to the bottom of page and only make your page scrollable when needed. The situation however, is that most solutions you'll find are pretty hard to implement. You'll have to add new HTML elements, rearrange your Markup, do a lot of testing etc. Well, I'm going to put an end to all that. Magento has really rich templates by default, so I've found a way to create sticky footers with just a few lines of CSS. No extra HTML markup, no editing templates!

The Cut & Paste solution.

Paste the following on the bottom of your styles.css file. As you can see, you'll only have to change '300px' to the desired hight or your footer (the main-container bottom-padding as the footer-container height). That's it!  Tested in internet explorer 6, IE7, IE8, Chrome, Firefox, Safari and Opera.

Let me know if everything works out for you too!

Erwin Otten

Erwin Otten is a Web Designer / Graphic Designer from Oude Wetering (The Netherlands) and co-founder of Hachmang & Otten. With an education in communication & multimedia design, he is passionate about web design at all levels including (information) architecture, interaction, code, and graphic design. Contact Erwin Otten