Webdesign and development in the Czech Republic

How to vertically center div content and add a sticky footer at the same time

This post tells you, how to vertically center div content and add sticky footer at the same time. If you don’t want to center your content, please read this post.

Today we want to share with you a little but useful snippet that will allow you vertically align your content on the page and at the same time have a sticky footer. You can see the demo here: Vertical Align + Sticky Footer.

This code explicitly sets .cell-footer height (for some reason it becomes 20px instead of 19px in WebKit browsers). Moreover it sets height by 100% instead of 99.99999%. To be honest, it should be 100% in all browsers, but for some reason 100% height adds vertical scrollbar in some cases in some of them, so we use 100% height only for WebKit.

In the case our visitor has IE < 8 and has javascript turned off, we need to add [code]class="no-js"[/code] to the #wrapper div and add this css to our page:
[html]
<!--[if lte IE 7]>
<style>
#wrapper.no-js {
height: auto; /* used to remove the gap after #footer and to avoid vertical scrollbar */
}
</style>
<![endif]-->
[/html]
This code won't center div content vertically, but at least it will show the site more accurate.
You can see a fully working example here: Vertical Align + Sticky Footer.