Sticky Footer | Code for Concinnity

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

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 • 1 Comment

Code for Concinnity

beautiful and elegant solutions