Home arrow HTML arrow Page 2 - 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 - Making Footers Stick to the Bottom of the Previous Web Page
(Page 2 of 2 )

As I explained at the beginning, there’s no shortage of options for dropping sticky footers into web pages. In this case, however, I’m going to follow an approach similar to the one suggested by Cameron Adams, as its implementation is pretty straightforward, semantic, and doesn’t require us to deal with the oddities of Javascript at all.

Put in a simple way, the technique relies heavily on the functionality of the “height” and “min-height” CSS properties to make the contents of a web page (except for its footer, of course) occupy the entire display window. Finally, the footer is appended to the structure by using a combination of relative positioning, padding and negative margins, thus creating a neat “sticky” container.

As usual, the best way to grasp the inner workings of this approach is with concrete code. So take a look at the following CSS snippet, which surely will make things clearer for you:

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
    background: #505903;
    font: normal 0.9em Arial, Helvetica, sans-serif;
    color: #000;
}
h1 {
    font-size: 4.2em;
    font-weight: bold;
    color: #505903;
}
h2 {
    font-size: 2.5em;
    font-weight: bold;
    color: #505903;
}
#wrapper {
    width: 960px;
    min-height: 100%;
    margin: 0 auto;
    background: #FFF;
}
#header {
    padding: 20px;
    background: #E3F8BE;
}
#main {
    padding: 20px 20px 200px 20px;
    background: #FFF;
}
#footer {
    width: 920px;
    height: 200px;
    padding: 20px;
    margin: -200px auto 0 auto;
    background: #E3F8BE;
    position: relative;
}

As we just noted, the sticky footer is created by assigning a value of 100% to the height of the <html>, <body> and “wrapper” elements. This simple trick makes the elements in question fill the entire browser window, even if the contents wrapped by them are shorter. Finally, the footer is stuck to the “main” div by assigning to it a relative positioning along with a negative margin of -200px (the same value given to its width). Obviously, this causes the footer to be ugly, overlapped over the main div; however, the issue is fixed by pushing the footer 200px down the page via a simple “padding-top.”

So far, so good. Now that you've grasped the logic driving the earlier CSS bit, the next step is to attach it to the web page previously defined, so that you can test it and see if the sticky footer just created is as functional as it seems at a glance.     

Sticky Footer Source Code

If you want to  see if the earlier CSS fragment really implements a sticky footer, below I included the example’s full source code. Here it is:

<!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 (the footer is placed outside the main wrapper)</title>
<style type="text/css">
html, body {
    height: 100%;
    padding: 0;
    margin: 0;
    background: #505903;
    font: normal 0.9em Arial, Helvetica, sans-serif;
    color: #000;
}
h1 {
    font-size: 4.2em;
    font-weight: bold;
    color: #505903;
}
h2 {
    font-size: 2.5em;
    font-weight: bold;
    color: #505903;
}
#wrapper {
    width: 960px;
    min-height: 100%;
    margin: 0 auto;
    background: #FFF;
}
#header {
    padding: 20px;
    background: #E3F8BE;
}
#main {
    padding: 20px 20px 200px 20px;
    background: #FFF;
}
#footer {
    width: 920px;
    height: 200px;
    padding: 20px;
    margin: -200px auto 0 auto;
    background: #E3F8BE;
    position: relative;
}
</style>
</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>

There you have it. Now, if you give the above web page a try using your own browser (even Internet Explorer if you want), it should be rendered in the following way: 

That worked pretty well, right? As the above image depicts, even when the contents placed inside the main section are scarce and effectively don’t fill the entire container, the footer is always displayed at the bottom of the web page. After all, the footer is really sticky! Best of all, its implementation only demanded that we code some boilerplate markup along with some simple styles.

Finally, it’s valid to point out that it’s possible to create a subtle variation of the sticky footer by placing it inside the main wrapper. Nevertheless, the details for how to accomplish this will be discussed in depth in the second part of this tutorial.

Closing Thoughts

In this first installment of a two-part tutorial, I demonstrated how to create a simple, yet functional sticky web page footer using a mixture of clean markup and a few basic CSS properties. As shown in the earlier code samples, the creation of the element was extremely straightforward, meaning that you shouldn’t have major trouble dropping a similar one into your own HTML pages.

In addition, you may have noticed that the footer was placed outside the main wrapper. It’s also feasible to massage the existing markup and build a sticky footer positioned inside the wrapper.

If you want to see how this can be accomplished in a few easy steps, don’t miss the final part! 


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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-2014 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials