Blueprint CSS with Sticky Footer

The age old problem

Getting the footer to stick to bottom of the page using CSS seems to be an age old problem. Recently, aXemedia published a cross-browser and unobtrusive method to do that. It says it supports maybe like 40 browsers on different platforms, but unfortunately, it doesn’t seem to (out of the box) support the Blueprint CSS framework.

After several hours of trial and errors, I rolled out a method that managed to make it work on both IE6 and FF3 (I didn’t go through the trouble to test it with BrowserShots or something, maybe someone can report your experience)

Enough talk, some demos

Blueprint’s sample page with a footer

The code — Sample usage

This method is basically more based on Ryan Fait’s method which requires adding extra non-semantic element to the markup:

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

/* sticky-footer.css */

*
{
margin: 0;
}

html, body
{
height: 100%;
}

#main
{
height: 100% !important;
min-height: 100% !important;
}

#footer
{
clear: both;
height: 140px !important;
margin-top: -160px !important; /* This is height + padding */
}

#push
{
height: 160px; /* This is footer's height + padding */
}

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

<html>
<head>

</head>

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

<div class="span-16"></div>


<div id="push"></div>
</div>

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

<div class="span-18"></div>
<div class="span-6 last"></div>
</div>
</body>
</html>

This method involves two tricks: putting a push element to make room for the .footer, and we also make .footer as another container.

Caveats

One strange side effects I’ve noticed from my approach is that now contents in .main.container must be wrapped inside columns span divs. Observant readers might notice that I changed the Blueprint sample page (long version) a little bit (by wrapping elements in column divs) so that things don’t overflow in an ugly way.

Extra — SASS mixin (untested)

If you use the excellent SASS for writing your CSS (which is totally cool, you won’t go back to CSS once you’ve tried it), here’s a little mixin for your convenience:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// sticky-footer.sass
=sticky-footer(!footer_height, !main_id="#main", !push_id="#push", !footer_id="#footer")
html,
body
:height 100%

#{!main_id}
:height 100%
:min-height 100%

#{!push_id}
:height #{!footer_height}

#{!footer_id}
:height #{!footer_height}
:margin-top -#{!footer_height} !important

Include it in your application:

1
2
3
4
5
6
7
8
9
10
11
12
13

// application.sass

@import sticky-footer.sass

+sticky-footer(170px, "#main", "#push", "#footer")

#main
:background yellow
// ...

#footer
:background pink
// ...

That’s it! Notice our nicely named <divs> forms the sentence main push footer In our example, since these IDs are the default, we could have done with a one-liner:

1	+sticky-footer(170px)

Published by kizzx2, on May 10th, 2009 at 6:29 pm. Filled under: Web Tags: blueprint, css, sticky footer • No Comments

Code for Concinnity

beautiful and elegant solutions