In this first part of a two-part tutorial, I demonstrate how to create a simple sticky web page footer by using only a mixture of clean markup and a few basic CSS properties.
The concept is far from being breaking news, I know, but the dynamic and evolving nature of the web quite often gives web designers new and demanding challenges. Today, not only is it of primary importance to create clean and solid web pages that neatly adhere to the standards, but it’s necessary to spice them up with a few additional features that (hopefully) will keep users engaged and coming back for more.
These requirements, though, are a doubled-edged sword that may end up hurting the functionality and accessibility of a website. In many cases, overloading a web page with a bunch of flashy (and totally unnecessary) things, like CSS/JavaScript-based animations, annoying rollovers and so forth, can produce an explosion of detrimental results, keeping people away from such a collection of eye-blinding effects. Sad but true.
As with many other aspects of modern web design, there’s a bright side to this story: sometimes the implementation of a subtle feature can make a website much more accessible, and even make it look slightly more professional. Would you like a simple example of this? Consider sticky footers, or in layman’s terms, footers that are always displayed at the bottom of a web page, regardless of whether or not the contents fill the entire browser window.
Sticky footers come in a huge variety of forms and flavors, ranging from the most invasive ones, usually created with JavaScript or with HTML elements with fixed positioning, and the “permissive ones,” which will scroll down along with the web page contents.
Since the latter are undeniably more elegant, as they don’t display an aggressive “in-your-face” behavior, in this two-part tutorial I’ll be explaining how to implement them in a few easy steps, by using a basic combination of uncluttered markup and CSS.
Building a Simple Web Page
The first thing we must do to implement the sticky footer mentioned at the beginning is define an (X)HTML document that includes … yes, a footer section. To fit this requirement, below I created a basic web page, whose structure looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Creating a sticky footer with CSS</title> </head> <body> <div id="wrapper"> <div id="header"> <h1>Creating a sticky footer with CSS</h1> <h2>Header section</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo.</p> </div> <div id="main"> <h2>Content section</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo.</p> </div> </div> <div id="footer"> <h2>Footer section</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo.</p> </div> </body> </html>
As you can see above, the previous web page has a typical structure, composed of the classic “header,” “main” and “footer” sections, which you've surely seen hundreds of times before. While there’s nothing inherently difficult to grasp with reference to this structure, you should pay attention to the way that the footer has been defined. In this case it’s been positioned out of the boundaries of the page’s main wrapper.
For obvious reasons, I decided to do this deliberately to create the so-called “sticky” footer, by means of CSS. But I’m getting ahead of myself, since the details of this implementation process will be covered in depth in the following section.
HTML 
HTML5 Boilerplate: Working with jQuery and Modernizr
