pic

Css sticky footer

Posted by webdesigncut on January 26th, 2010 in Css.
14 Comments »
port_large

There are many sticky footer methods to be found in Google. We,’ve tried many of them and they usually fail in some regards. The problem it seems is that some of these methods are old and may have worked in older browsers but they don’t in newer browser releases. Because those pages are old, and were heavily linked too in the past, they still rank high in Google. Many webmasters looking for a sticky footer solution end up scratching their heads as they try these same old methods because they are the first ones they end up finding when they search.

Here i am going to share a css sticky fooyter that works  on all major browsers

The HTML Code

Below is the basic structure of the HTML code. You’ll notice how the footer <div> sits outside of the wrap <div>.
<div id=”wrap”>

<div id=”main”>

</div>

</div>

<div id=”footer”>

</div>

You would place your content elements inside the main <div>. For example, if you were using a 2 column floating layout you might have this;
<div id=”wrap”>

<div id=”main”>

<div id=”content”>

</div>

<div id=”side”>

</div>

</div>

</div>

<div id=”footer”>

</div>

A header could be placed inside the wrap but above the main like this;
<div id=”wrap”>

<div id=”header”>

</div>

<div id=”main”>

</div>

</div>

<div id=”footer”>

</div>

If you wanted to place any elements outside of either the wrap or the footer then you would need to use absolute positioning else it messes up the 100% height calculations.
The CSS Code

Below is the CSS code makes your sticky footers to stick to the bottom.
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;}

You’ll notice that the footer height is used three times here. This is important and should be the same value for all three instances. The height properties are stretching the wrap <div> to the full height of the window. The negative margin of the footer brings it up into the padding created for the main <div>. Since the main rests inside the wrap the padding height is already part of the 100%. Thus the footer rests at the bottom of the page.

But we are not done just yet. We need to add the clearfix properties to the main <div>.
Clearfix Hack to the Rescue

Many CSS designers will be familiar with the Clearfix Hack. It solves a lot of problems with floating elements. We use it here to get the footer to stick in Google Chrome. It also solves issues that come up when using a 2-column layout where you float your content to one side and your sidebar to the other. The floating content elements inside the main <div> can cause the footer to become un-stuck in some browsers.

So we add this to our stylesheet as well;
.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 */

If you prefer to use the above method with the extra push <div> you’ll still need to apply a clearfix if you are using a floating multi-column layout.


14 Comments

  • Neoma Kanzler
    Neoma Kanzler 14 Jul, 2010

    Your blog is really intriguing,I would like to communicate with u,could i sent email for you?

    • webdesigncut
      webdesigncut 15 Jul, 2010

      yes you can contact me if you need anything to know

  • Taio Cruz
    Taio Cruz 15 Jul, 2010

    enjoyed this article!

  • webdesign
    webdesign 15 Jul, 2010

    I have read couple of articles on your blog and can say it was really interesting, thanks for sharing that.

  • product marketing
    product marketing 15 Jul, 2010

    I just wanted to comment your blog and say that I really enjoyed reading your blog post here. It was very informative and I also digg the way you write! Keep it up and I’ll be back to read more soon mate

  • Jenn Air Stoves
    Jenn Air Stoves 21 Jul, 2010

    shares employ a terrific site decent Gives many thanks for the effort to help me personally

  • gucci handbags
    gucci handbags 23 Jul, 2010

    This could be the earliest time I’ve commented right here and I have to say you give genuine, and excellent facts for bloggers! Wonderful employment.

  • Vertu Constellation Series

    Keep posting stuff like this i really like it

  • true religion jean
    true religion jean 27 Jul, 2010

    This article gives the light in which we can observe the reality. this is very nice one and gives in depth information. thanks for this nice article.

  • Bonnie Hirschman
    Bonnie Hirschman 29 Jul, 2010

    Your weblog is incredibly intriguing,I wish to connect with u,could i sent e-mail to you?and this my blog http://scuba-dive-sites.com/ wellcome!

  • jean
    jean 02 Aug, 2010

    I read you post . this is informative and helpful.. I like to know more about affiliated marketing.. Thanks for sharing your knowledge about it.

  • noni juice
    noni juice 04 Aug, 2010

    This page wasnt working yesterday. i tried viewing it but it timed out 3-4 times now but i can access it now. Why did this happen? Am i the only one having this problem?

  • Enrique Fergason
    Enrique Fergason 21 Nov, 2010

    Hey – wonderful weblog, just seeking all around some blogs, appears a fairly wonderful platform you are using. I’m presently working with WordPress for a few of my sites but searching to change among them over to a platform much like yours like a trial run. Anything in certain you’d advocate about it?

  • website
    website 02 Feb, 2011

    Priceless information! I will check back very often for more great articles like this one.

Leave a Comment


pic
pic