Absolute Bottom Footer

Almost every website has a header, middle section, and footer. Users have come to expect it and enjoy the consistency. However, sometimes the footer is a little bit tricky if a particular webpage does not have a lot of content. Typically, we want a footer to "stick" to the bottom of a page and not the bottom of a browser, also known as a "sticky footer". Let's see an example of how annoying a footer can be if you have very little content on a web page. Placing the footer at the absolute bottom of a web page has been a problem for many years, but I will show you a complete HTML and CSS only solution.

<style>

html, body {

	margin:0px;

	padding:0px;	

	background-color:#E9E9E9;

}

div.header {

	width:100%;	

	background-color:#555;

	color:#FFF;

	padding:5px 0px;

	text-align:center;

}

div.main-content {

	background-color:#FFF;

	border:thin solid #666;	

	width:600px;

	margin:10px auto;

	padding:5px;

}

div.footer {

	width:100%;	

	background-color:#555;

	color:#FFF;

	padding:5px 0px;

	text-align:center;

}

</style>

<div class="header">

	<h1>After Hours Programming</h1>

</div>

<div class="main-content">

	<p>Sed porttitor lectus nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus. Donec rutrum congue leo eget malesuada. Sed porttitor lectus nibh.</p>

	<p>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Cras ultricies ligula sed magna dictum porta. Pellentesque in ipsum id orci porta dapibus. Sed porttitor lectus nibh. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</p>

</div>

<div class="footer">

	<p>© 2013 After Hours Programming</p>

</div>

Something just does not look right about this web page. The footer displays awkwardly in the middle of the page, which is never where we want a footer. Sure, we could strap the footer to the bottom of the window, but a footer that moves with the page is almost as annoying. So, how can we push a footer to the bottom of a page for both pages with a lot of content and those with little content? It's easy with a simple little trick that all browsers since IE 6 understand.

We need to wrap all of our content in a containing div that spans at least the user's window, which gives us the absolute bottom of the entire web page. Now that we know the bottom of the page, we just modify our footer div to sit on top of the container div by the height of the footer.

<style>

html, body {

	margin:0px;

	padding:0px;	

	background-color:#E9E9E9;

}

div.header {

	width:100%;	

	background-color:#555;

	color:#FFF;

	padding:5px 0px;

	text-align:center;

}

div.footer {

    height:50px; /*different*/

    width:100%; 

    background-color:#555;

    color:#FFF;

    padding:5px 0px;

    text-align:center;

}

/*different*/

div.container {

    min-height: 100%;

	height: auto !important;

	height: 100%;

	margin: 0 auto -60px; /* the bottom margin is the negative value of the footer's height */

}

/*different*/

div.footer-push {

	height: 60px

}

</style>

<div class="container"><!--different-->

    <div class="header">

        <h1>After Hours Programming</h1>

    </div>

    <div class="main-content">

        <p>Sed porttitor lectus nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus. Donec rutrum congue leo eget malesuada. Sed porttitor lectus nibh.</p>

        <p>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Cras ultricies ligula sed magna dictum porta. Pellentesque in ipsum id orci porta dapibus. Sed porttitor lectus nibh. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</p>

    </div>

    <div class="footer-push"></div><!--different-->

</div><!--different-->

<div class="footer">

    <p>© 2013 After Hours Programming</p>

</div>

If you actually copied both examples into your browser, you will notice that the second example looks much better. We could have used JavaScript to push the footer down to the bottom of the page, but why use JavaScript when CSS will do? The last important note is that some footers are bigger than other, which means you might have to modify the footer's height in order to have a footer that you like. I hope you enjoyed the tutorial as much as I enjoyed writing it and that your "sticky footer" problem is solved.