Blueprint CSS with Sticky Footer — Revisited

beautiful and elegant solutions

Blueprint CSS with Sticky Footer — Revisited

A while ago I wrote about how to get Blueprint CSS with a Sticky Footer. That method required adding non-semantic empty div and was not very robust.

After trying for some time, I managed to get the method on cssstickyfooter.com working with Blueprint, and I find this method much more elegant:

Demo

Blueprint’s sample page with a footer

The code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<html>
<head>



<link rel="stylesheet" type="text/css" href="sticky-footer.css" />
<link rel="stylesheet" type="text/css" href="application.css" />
</head>

<body>
<div id="wrap">
<div id="main" class="container">

</div>
</div>

<div id="footer" class="container">

</div>
</body>
</html>

It was totally unobtrusive! And we only needed to plug-in sticky-footer.css from cssstickyfooter.com, verbatim:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

/* sticky-footer.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 */

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

/* application.css */

/* Our own customizations are nicely tucked in a separate file, yay! */
*
{
text-align: left;
}

#footer
{
background: #f0f0ff;

/* We can over-ride default settings here instead of changing the original
sticky-footer.css */
padding-top: 20px;
height: 150px;
margin-top: -170px;
}

#main
{
padding-bottom: 170px;
}

Enjoy!

Published by kizzx2, on May 11th, 2009 at 7:12 pm. Filled under: Web Tags: blueprint, cross browser, css, cssstickyfooter, sticky footer • 15 Comments

15 Responses to “Blueprint CSS with Sticky Footer — Revisited”

Awesome – This is exactly what I was looking for. Thank you.

One thing I had to add: I set body margins to 0 (overriding blueprint’s default):

body { margin:0; }

Without that, there was always overflow / scrollbars, and the footer would get pushed below the bottom of the browser window.

Thanks again!

Comment by Paul on May 21, 2009 at 12:17 am

Hi,

I almost get it working, but still I have a small problem. When you go to this page: http://fitrent.be/disclaimer you will see that the text goes ‘under’ the footer. I can’t figure out why, anybody sees the problem?

Kind regards, Michael

Comment by Michael Torfs on June 17, 2009 at 7:12 am

Worked like a charm! Tried initially to integrate it into my existing design but IE kept on putting a space below my footer. Frustrating!!!

Ended up using your HTML/CSS code as a template and just built out my design from there.

It works! Thanks!

Comment by khedaywi on September 9, 2009 at 10:53 am

Worked for me right out of the box. Great! Thank you!

Comment by Rosastef on February 17, 2010 at 10:53 pm

Thanks for the trick. This is JUST WORKING! Great.

Comment by Noto on July 15, 2010 at 6:46 pm

FYI. This doesn’t work in Chrome. However, its great!

Comment by David Daniel on August 21, 2010 at 11:42 am

@David Daniel: I just tried to view the sample page in Chrome 5.0 (Win 7 x64) and it worked. What versions were you using or do you have a page which doesn’t work with Chrome?

Comment by kizzx2 on August 21, 2010 at 11:49 am

After hours trying to do that by myself, you solved my problems, thank you !

Comment by qnt0ine on September 6, 2010 at 1:04 am

After trying other solutions that didn’t work with Blueprint, I tried yours today, with the updated version on cssstickyfooter.com (New CSS Sticky Footer 2010) and it worked perfectly on Firefox and Chrome, at least on my initial tests). Thank you very much for making this available!

Comment by Fernando Correia on October 27, 2010 at 10:36 pm

HI, Great work, this is just what my site needed. How do we get the footer colour to fill across the page but still leave the footer content within the container.

Thanks for sharing

Comment by ALAN on December 6, 2010 at 8:05 am

So AWESOME and EASY. Thanks

Comment by Scott on December 30, 2010 at 12:52 am

Fantastic! Thank you so much for posting this. It’s exactly what I was looking for!

Comment by Lisa on March 28, 2011 at 11:18 am

Hey thanks a lot for this! It works like a charm! However, only one final question! How could we get to use a 100% sticky footer with this? Any leads? Thanks again for this article, its excellent!

Comment by Eddy on August 25, 2011 at 12:54 am

@Eddy I haven’t touched CSS for a long time (as you can see from the change in topic trend in my blog), but I guess you can just say “width: 100%” in the footer?

Comment by kizzx2 on August 30, 2011 at 12:05 am

When you are in a not good position and have got no cash to go out from that, you would require to take the mortgage loans. Because that will help you emphatically. I take consolidation loans every time I need and feel great because of that.

Comment by JanisPeters on December 27, 2011 at 11:42 am

Code for Concinnity

beautiful and elegant solutions