Code for Concinnity

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
<!-- All we need is to structure our HTML markup according to cssstickyfooter.com -->

<html>
    <head>

        <!-- Include Blueprint here ...-->

        <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">
                <!-- meh meeh.. -->
            </div>
        </div>

        <div id="footer" class="container">
            <!-- Look! I can still use Blueprint's grid here! -->
        </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: , , , , • 15 Comments