CSS Sticky Footer – Keep your footer at the bottom of the page

On larger monitors or web pages with a small amount of content you often find that the footer is floating halfway up the page. When really it should be stuck nicely to the bottom of the page at all times. There is a very simple way to keep your footer at the bottom of the page and it’s called CSS Sticky Footer.

CSS Sticky Footer is a simple method consisting of only CSS and HTML that keeps your footer stuck to the bottom of the page. It is cross browser friendly and takes only minutes to implement on your website. Let’s have a look at how it works and how to implement it on our website.

How Sticky Footer Works

The HTML Code

Below is an example of a basic website structure which contains a header across the top of the page, a main content area on the left, a sidebar on the right and a footer across the bottom of the page. You will need the “wrap”, “main” and “footer” div elements present in your website.

<div id="wrap">
    <div id="header">
        Your header goes here
    </div>
    <div id="main" class="clearfix">
        <div id="content">Your content goes here</div>
        <div id="sidebar">Your sidebar goes here</div>
    </div>
</div>

<div id="footer">
    Your footer goes here
</div>

The CSS Code

Below is the CSS that will make your footer stick to the bottom of the page along with the “clearfix” hack which will fix other floating layout issues. Simply add this CSS to your stylesheet and make sure that the three instances of the footer height below are all the same.

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 150px;
	clear:both;}

.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}

.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

For further details please refer to the CSS Sticky Footer website. Here is another great method to keep your footer at the bottom of the page.

Adham Dannaway

Web Designer and Front End Developer with a passion for web design, coding, blogging, WordPress and chewing gum. Check out my web design portfolio and follow me on Twitter and Facebook!

Share this post!

Tags: , , , , ,

  • Share
  • Stumbleupon Cre8ive Commando
    • Share

  1. Paul Maulin on October 21, 2009

    Nice post!

  2. Joseph McCullough on February 3, 2010

    Why is this necessary? What’s the issue with just using clears?

  3. Cre8ive Commando on May 31, 2010

    @Joseph – Sometimes you may have a very short page which will cause the footer to float in the middle of the screen on larger monitors. Sticky footer will ensure that this doesn’t happen and that the footer is always stuck to the bottom of the page. :-)

  4. Tanveer Hayat on August 4, 2010

    Ya it will work best for very short pages and if the footer background is dark and expandable. A very use full trick dude!

  5. iTechRoom on August 25, 2010

    That’s a nice trick.

  6. Geoff Johnson on January 13, 2011

    Hey I have a quick question. I used this sticky footer technique and it works perfectly in firefox, but when I open it in things like safari and chrome, the footer gets messed up (as if it is pushed down too far.) Is there any solution to this? Maybe I just suck at css.

    http://www.geoffjohnsondesign.com/wordpresstheme is where it is located.

  7. Cre8ive Commando on January 15, 2011

    @Geoff – It looks like you haven’t really implemented sticky footer correctly. If you remove the “height:auto” from your #wrap it should fix your problem. My rule with CSS is, if you don’t NEED it, don’t add it. Hope that helps. :-)

Trackbacks

  1. [...] This post was mentioned on Twitter by Adham Dannaway, Jörg Goncz, mario lopez, Alexis Fedor and others. Alexis Fedor said: RY @webofdesign CSS Sticky Footer ? Keep your footer at the bottom of the page #webdesign http://bit.ly/12Z0CV [...]

  2. [...] be important in future projects. http://ryanfait.com/sticky-footer/ this is a good site, this one http://www.cre8ivecommando.com/css-sticky-footer-keep-your-footer-at-the-bottom-of-the-page-1124/ is the one I understand the best, I add a negitive margin the same height as the footer to the end [...]


Have your say!