Footer stick to the bottom :: Blog

Footer stick to the bottom

As i was applying new layout on my pages I had to face a problem. I needed to make footer stick to the bottom of the page at all times. Since that wasn't that easy as I expected I decided to share my solution. The easiest way would be to put footer normal under content, but that wouldn't work, because for shorter contents the footer wouldn't be at the bottom. So there went this alternative and I had to stick to positioning techniques.

The HTML

I use floated content in my pages, which made this problem a little bit more difficult, but not by much. My solution fits both floated and normal content.
The whole HTML content needs to be placed inside one DIV container element. I created the following code:

<div id="container"></div>

The main page content is built of another DIV. This DIV contains floated page columns, the CSS will be explained later. The container DIV has now the
following code:

<div id="container">
    <div id="content">
        <div id="floated-left-cont">
            <p>Floated left content here</p>
        </div>
 
        <div id="floated-right-cont">
            <p>Floated right content here</p>
        </div>
    </div><!-- /content -->
</div><!-- /container -->

If you use floated elements like I did, you'll need a cleaner element to be placed in the content DIV after the floated elements. This little step will set the height of the content DIV. The code looks like this now:

<div id="container">
    <div id="content">
        <div id="floated-left-cont">
            <p>Floated left content here</p>
        </div>
 
        <div id="floated-right-cont">
            <p>Floated right content here</p>
        </div>
 
        <div class="cleaner"></div>
    </div><!-- /content -->
</div><!-- /container -->

And the final step is of course including footer element, which will go to the end of container element. The whole HTML code looks like this now:

<div id="container">
    <div id="content">
        <div id="floated-left-cont">
            <p>Floated left content here</p>
        </div>
 
        <div id="floated-right-cont">
            <p>Floated right content here</p>
        </div>
 
        <div class="cleaner"></div>
    </div><!-- /content -->
 
    <div id="footer">
        <p>Footer here</p>
    </div><!-- /footer -->
</div><!-- /container -->

The CSS

First steps will be setting some base stuff, like body element (which is not significant for the process) and a simple cleaner class:

.cleaner {
    clear: both;
}
 
body {
    font-size: 80%;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    text-align: center;
}

The first very important element is the main container, the CSS looks like this:

div#container {
    width: 100%;
    min-height: 100%;        /*        important    */
    _height: 100%;        /*        min-height alternative in IE    */
    background: silver;        /*        not important    */
   position: relative;        /*        important    */
}

As you can see I use the simple _ IE hack, which is not valid, but for this sake considered useful. You can also use the universal selector *, it's your choice. I will comment one special line in this style, the _float: left; line. I stumbled upon a problem in IE, where my content was cut off at the end of page (when the page was scrollable), that's why I used this style to make it stuck where I wanted it. I didn't succeed however to trigger this situation when making this standalone page. If you face this problem you can use this style to avoid it :)

The next element will be content DIV, the style is here:

div#content {
    width: 1000px;        /*        example    */
    margin: 0 auto;    /*        example    */
    height: auto;        /*        important    */
    padding-bottom: 50px;        /*        for the footer    */
    _padding-bottom: 0;        /*        IE fix    */
    text-align: left;            /*        not important    */
    position: relative;        /*        important    */
}

No comments for this style. The following styles are used for the floated columns:

#content div#floated-left-cont, #content div#floated-right-cont {
    min-height: 50px;        /*        e.g.    */
    _height: 50px;        /*        IE min-height    */
    border: 1px dashed black;        /*    not important    */
}
 
#content div#floated-left-cont {
    width: 30%;        /*        e.g.    */
    float: left;        /*        ad hoc    */
}
 
#content div#floated-right-cont {
    width: 69%;            /*        e.g.    */
    float: right;        /*        ad hoc    */
}

No comments here either. And the last style is of course for the footer itself, here it is:

#container div#footer {
    width: 100%;        /*        e.g.    */
    height: 40px;            /*        e.g.    */
    background: gray;        /*        not important    */
    position: absolute;        /*        important    */
    left: 0;        /*        e.g.    */
    bottom: 0;        /*        important    */
}

That's the whole solution, hope it helps ;)

Peter Rossa