Web design and development for companies and individuals in the Czech Republic
+420 608 713 199

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.

Basically we create a table structure.

#wrapper {
display: table;
}
#wrapper > .row {
display: table-row;
}
#wrapper > .row > .cell {
display: table-cell;
}

Then we remove default paddings and margins:

* {
margin: 0;
padding: 0;
}

Then we set 100% heights for parent elements:

html, body {
/* default height */
height: 100%;
/* to avoid vertical scroll bar in most browsers */
height: 99.99999%;
}
#wrapper {
height: 100%;
min-height: 100%;
width: 100%;
}
#middle-row {
height: 100%;
}

Now we can set-up vertical centering:

#middle-cell {
	vertical-align: middle;
}

And finally we set the footer height, remove the gap after the footer and set the #push height (#push is used to avoid #main-content overflow by #footer):

#push, #footer {
	height: 19px; /* footer height and #push helper height*/
}
#wrapper {
	margin-bottom: -19px; /* remove the gap after the footer, must be the same as #footer and #push */
}

After some testings we found that WebKit browsers (Safary and Chrome) add one-pixel space after the footer. The solution is not that pretty, but at least it works:

/* to avoid vertical scrollbar in webkit */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	html, body {
		height: 100%;
	}
	.cell-footer {
		height: 19px;
	}
}

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.

The whole css is:

* {
	margin: 0;
	padding: 0;
}
html {
	overflow: auto; /*IE specific*/
}
html, body {
	/* default height */
	height: 100%;
	/* to avoid vertical scroll bar in most browsers */
	height: 99.99999%;
}
#wrapper {
	display: table;
	height: 100%;
	min-height: 100%;
	width: 100%;
	margin-bottom: -19px; /* must be the same as #footer and #push */
}
#wrapper > .row {
	display: table-row;
}
#wrapper > .row > .cell {
	display: table-cell;
}
#middle-row {
	height: 100%;
}
#middle-cell {
	vertical-align: middle;
}
#main-content {
	display: inline-block;
}
#push, #footer {
	height: 19px;
}

/* to avoid vertical scrollbar in webkit */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	html, body {
		height: 100%;
	}
	.cell-footer {
		height: 19px;
	}
}

In this code 19px is our footer height.

Let’s compose our html code:

<div id="wrapper">
	<div class="row" id="header">
		<div class="cell">
			Here you can place your header
		</div>
	</div>
	<div class="row" id="middle-row">
		<div class="cell" id="middle-cell">
			<div id="main-content">
				Your content
			</div>
			<div id="push"></div>
		</div>
	</div>
</div>
<div class="row-footer" id="footer">
	<div class="cell-footer">
		And here is you sticky footer
	</div>
</div>

This code works perfectly in all modern browsers. If you want this code to work in IE version less than 8, there is no simple solution. We’ve come to this one, using JQuery:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script>
//<![CDATA[
	/* This script is used to wrap #main-content by a table in order to have it aligned vertically in IE7 */
	/* If you don't support IE7, you may safely remove this script */
	jQuery(document).ready(function(){
	  $('.no-js').removeClass('no-js');
	  if ($.browser.msie && $.browser.version <= 7) {
		$("#main-content").wrap(
			'<table style="height:100%;width:100%;">' +
				'<tbody id="tbody-wrapper">' +
					'<tr>' +
						'<td valign="middle" align="center"></td>' +
					'</tr>' +
				'</tbody>' +
			'</table>'
		);

		// reduce the gap after #main-content
		$('#push').css('position', 'relative').css('margin-top', '-4px');

		// move #footer to #push
		$('#footer').prependTo('#push');

		// remove scrolling and the bottom gap
		$('html').css('margin-bottom', ($('#footer').height() + $('#header').height()) + 'px');
	  }
	});
//]]>
</script>

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.

Interested in our services?
Hire Us