Can be consider weird, that a layout as simple as our content vertical centered, and our footer always at the bottom, can be so hard to create without javascript, or hard code css pages.

But after some research, and a little of frustration, specially, trying to keep internet explorer compatibility, here is a small css code who will allow our footer to be always visible on the bottom, and our content centered on the middle of the browser.

This CSS footer stylesheet will make a footer stick to the bottom of the page, allowing us to have a top header, and vertical align content.

There are several ways to make a footer stick to the bottom of a page using CSS, but what all people want, is to archive their goals with the less numbers or code and avoid the use of javaScript.

This method uses only 4 simple css classes and no more than 20 lines of CSS.

It's also compatible with all major browsers. Internet Explorer 8 and up, Google Chrome, Safari, Firefox and Opera, and keeps compatibility with older versions of Internet Explorer, the footer is on the bottom but there will be no vertical align.


View the example CSS Sticky Footer.


We will reach our goal, using a negative margin div equal in value to the height of the footer and the header together, and a second div inside, with a positive padding of the same value.

Lets take a look to the code and see how it works:


CSS:

html,body
	{
	margin:0;
	padding:0;
	border:0;
	height:100%;
	}

.container
	{
	height:100%;
	min-height:100%;
	display:table;
	border:0px;
	padding:0px;
	margin:0px;
	margin-top:-[headerHeight+footerHeight];
	width:100%;
	}

.middle
	{
	z-index:1;
	position:relative;
	vertical-align:[middle];
	display:table-cell;
	padding-top:[headerHeight+footerHeight];
	}

.header
	{
	text-align:center;
	height:[headerHeight];
	z-index:2;
	position:relative;
	}

.footer
	{
	height:[footerHeight];
	z-index:3;
	position:relative;
	}


HTML structure:

<html>
<head>
  <link rel="stylesheet" href="layout.css" />
</head>
<body>

<div class='header'>Your header here</div>

<div class='container'>
  <div class='middle'>Your content here</div>
</div>

<div class='footer'>Your footer here</div>

</body>
</html>


Some notes:

Just take care, that adding margins to elements is messing up the structure, but you can use padding instead or create a multiple div structure, and all will work again.

If you find that this code, doesn't work for you, check to see if our "example CSS page" works in your browser. if not, just let us know your browser, version and operating system you are using, and we will check if there is something wrong with the code.



Download: Css and HTML demo files