Home arrow HTML arrow Page 2 - Advanced Sticky Footers in HTML and CSS
HTML

Advanced Sticky Footers in HTML and CSS


In this two-part tutorial, I demonstrate how easy it is to create a couple of sticky web page footers by using a combination of clean markup and a few basic CSS styles.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 6
December 26, 2011
TABLE OF CONTENTS:
  1. · Advanced Sticky Footers in HTML and CSS
  2. · HTML AND CSS Absolute Positioning

print this article
SEARCH DEVARTICLES

Advanced Sticky Footers in HTML and CSS - HTML AND CSS Absolute Positioning
(Page 2 of 2 )

Since the footer defined previously is now a child of the web page’s main wrapper, the easiest way to place it at the bottom of the document is by using the functionality of absolute positioning. As usual, the best way to shed some light on this process is with some concrete code. Therefore, take a look at the following, which does all the “magic” required to create the desired sticky footer:

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

If you’re aware of the goodies offered by the relative/absolute positioning tandem, the above code fragment should be a breeze for you to grasp. In this case, the tandem has been used to make the footer stick to the bottom of the web page by assigning to its “bottom” property a value of .. 0. Yes, the method is as simple as that.

Of course, you should also notice the “height: 100%” and “min-height: 100%” declarations given to the “<html>, <body>  and “#wrapper” elements respectively. This assures that the pertinent footer will remain pushed against the bottom all of the time, regardless of the content embedded in the wrapper.

And now that you've seen how easy it is to create a sticky footer by using absolute positioning, the next logical step is to add the previous CSS snippet to the web page defined before, so that you can give the footer a try and see it in action.

Showing the Finished Version of the Sticky Footer

As I promised in the segment that you just read, below I included for you the full source code corresponding to the web page that renders the previous sticky footer. Take a look at it:

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

Mission accomplished. Now, all that you need to do is launch your browser and point it to the HTML page above. If everything worked as expected, the page should be rendered in the following way:

As the previous image shows, the footer effectively behaves like a true sticky element. And best of all, it’ll be displayed consistently across most modern browsers, including Internet Explorer.

To sum up, by using a simple mixture of relative/absolute positioning along with a few padding and margins, I managed to create a neat sticky footer that lives inside the main wrapper of the containing web page. So, armed with the code samples shown in this article, you should be able to create your own functional sticky footer.

So, what are you waiting for? Be bold and embrace the challenge!

Closing Thoughts

In this two-part tutorial, I demonstrated how easy it is to create a couple of sticky web page footers, by using a combination of clean markup and a few basic CSS styles. As you saw before, the implementation of this classic structure is not at all complex, which means that you shouldn’t have any major problems including it in your own (X)HTML documents. 

So, if you’re planning to give your website a refreshing, sleek touch that boosts its current accessibility, a sticky footer might be an option worth considering.

See you in the next web design tutorial!


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