Home arrow HTML arrow HTML and CSS Sticky Footers
HTML

HTML and CSS Sticky Footers


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.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 7
December 19, 2011
TABLE OF CONTENTS:
  1. · HTML and CSS Sticky Footers
  2. · Making Footers Stick to the Bottom of the Previous Web Page

print this article
SEARCH DEVARTICLES

HTML and CSS Sticky Footers
(Page 1 of 2 )

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.


blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials