CSS Sticky Footer

December 23rd, 2009.

css-sticky-footer-title

Sometimes when designing a web page, you just want that footer to stick to the bottom of the window, even when your page is thin on content. I don’t mean permanently as you scroll, but on those pages where due to a lack of content there is no vertical overflow, and so you’d like the footer to actually remain at the ‘foot’ of the browser window. Not freely hiking up to the middle of your page, uninvited!

Well, the clever chaps over at CSSStickyFooter.com have devised a way to do this more cleanly than the ‘solutions’ of the past.

css-sticky-footer-example

As you can see in this quick example, due to the sparse content on the page, the footer has decided to wander up the page leaving a gap beneath

This looks a bit messy. However, it easily be fixed and become…

css-sticky-footer-fixed

The footer has now rooted itself to the foot of the browser window, regardless of the page's content.

Why is this solution better than others?

  • Works in all major browsers. Chrome, Firefox 2/3, IE 6/7/8, Opera 9/10, Safari… and loads more. Full list of browser support.
  • Works with columned CSS layouts.
  • No overlaps in resized windows.
  • No empty ‘push’ div clogging up your code.

Okay, so how do I do it?

Full credit here of course goes to those chaps at CSSStickyFooter.com.

I will only include the raw HTML/CSS code here, however you can get the full instructions over at the CSSStickyFooter website.

The HTML

<div id="wrap">

        <div id="main" class="clearfix">

        </div>

</div>

<div id="footer">

</div>

The CSS

/*
Sticky Footer Solution
by Steve Hatcher
http://stever.ca
http://www.cssstickyfooter.com
*/

* {
margin:0;
padding:0;
}

/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

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;
}

/* CLEAR FIX*/
.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 */

About

Mark is a web designer / developer working for Internet Assets from Lancashire, England. He is a graduate of Graphic and Communication Design from the University of Leeds, and is keen on all things related to technology.

Comments

  1. Hi there would you mind letting me know which webhost you’re working with?

    I’ve loaded your blog in 3 completely different web browsers and I must say this
    blog loads a lot quicker then most. Can you suggest
    a good web hosting provider at a fair price? Thank you, I appreciate it!

  2. I think this is among the most important info for me.
    And i am glad reading your article. But wanna remark on few general things,
    The site style is great, the articles is really nice : D. Good job, cheers

    Feel free to surf to my website :: xbox one giveaway (http://disqus.com)

  3. If you assess AK-74M with M16A3, it has comparatively slower fireplace amount and a
    bit greater bullet destruction. Fortunately, you
    can learn everything you need to know to give powerful feedback that can transform your
    business. I was graduating with a Bachelors of Science in Politics (which I loved).

  4. I am not sure where you’re getting your info, but great topic.
    I needs to spend some time learning much more
    or understanding more. Thanks for magnificent information I was looking for this information for my mission.

  5. Pretty great post. I just stumbled upon your blog and wanted to say that I’ve
    really loved surfing around your blog posts.
    After all I will be subscribing for your rss feed and
    I’m hoping you write once more soon!

    Here is my website … świadectwo energetyczne opole

  6. I’m really impressed along with your writing skills as smartly as
    with the structure on your blog. Is this a paid subject or did you modify it your
    self? Anyway stay up the excellent quality writing, it’s uncommon to see
    a nice weblog like this one these days..

  7. I did it, it’s possible not to the likes of Frank Kern, but right here I am
    nonetheless functioning from the comfort and ease of residence and surrounded by the ones I maintain dear.
    In this way, it will not be difficult to keep you motivated because your business
    is something that you are passionate about in the first place.
    What can be more revolutionizing in the world of technology
    than the whole concept of remote tech support.

  8. Does your site have a contact page? I’m having a tough time locating it but, I’d like
    to shoot you an email. I’ve got some recommendations for your blog you might be interested in hearing.
    Either way, great site and I look forward to seeing it expand over time.

  9. Hello mates, its fantastic piece of writing regarding cultureand entirely explained, keep it up all the time.

  10. Appreciating the persistence you put into your site and in depth
    information you offer. It’s good to come across
    a blog every once in a while that isn’t the same old rehashed material.

    Great read! I’ve bookmarked your site and I’m including your RSS feeds to my Google account.

  11. Hi, Neat post. There is an issue together with your site in internet explorer, might test this?
    IE still is the marketplace leader and a good
    component to folks will omit your fantastic writing due to this problem.

  12. Dewey says:

    This is very attention-grabbing, You’re an overly skilled
    blogger. I’ve joined your feed and stay up for in quest of more of your wonderful post.

    Additionally, I’ve shared your site in my social networks

    My webpage – Gta 5 Full Download (Dewey)

  13. You really make it seem really easy together with your presentation but I find this
    topic to be actually one thing which I think I’d never understand.
    It kind of feels too complex and extremely huge for me.
    I am having a look forward for your subsequent submit, I’ll attempt to get
    the hold of it!

  14. Useful info. Fortunate me I found your web site by chance, and I’m stunned why this twist
    of fate didn’t took place in advance! I bookmarked it.

  15. Hello! I’ve been reading your site for a long time now and finally got the courage to go ahead and give you a shout out from
    Austin Tx! Just wanted to tell you keep up the excellent job!\

  16. Brunette says:

    It’s remarkable to pay a visit this web page and reading the views of all friends regarding this article, while I
    am also zealous of getting experience.

  17. Gabriella says:

    Wow that was odd. I just wrote aan incredibly long comment
    but after I clicked submiut my comment didn’t appear.

    Grrrr… well I’m not writing alll that over again. Anyhow,
    just wantred to say superb blog!

    Alsoo visit my wenpage – Admiral Insurance helppline [Gabriella]

  18. Marko says:

    Have you ever considered creating an e-book or guest authoring on other blogs?
    I have a blog based on the same ideas you discuss and would really like to have you share some stories/information. I know my
    audiednce would enjoy your work. If you are even remotely interested, feel
    free to shoot me an e-mail.

    Feel free to surf to my blog post :: Parcelforce Phone Number
    (Marko)

  19. May I simply just say what a relief to find somebody who actually knows what they are discussing online.
    You actually know how to bring an issue to light and make it important.
    More people must check this out and understand this side of your story.
    I was surprised that you aren’t more popular given that you surely possess the
    gift.

  20. Hola , puesto aseado. No se un problema con su sitio en web explorador,
    poderío comprobar esto? IE no obstante es el mercado
    líder de mercado y una gran parte de componentes para
    gente omitir maravilloso debido a este problema.

  21. Appreciation to my father who shared with me about this website, this weblog is
    actually awesome.

  22. SEOZealand says:

    Thanks for sharing your thoughts about footer.
    Regards

  23. oturgan says:

    I’m now not certain where you’re getting your information, however
    great topic. I must spend a while studying much more or figuring out more.

    Thanks for wonderful info I was searching for this info for my mission.

Don't be shy. Leave a comment!

(Required)

(Required, not published)