View a Demonstration

I remember a couple of years ago, before I used CSS to structure my website layouts, achieving 100% height with tables and getting a footer to stick to the bottom of the page was a nightmare. No matter how many forums or articles I read, it never seemed to be an easy task.

Now those days are behind me (phew!) I wanted to share with you how I now go about structuring my layouts with CSS so that the footer of a page always remains at the bottom and reacts accordingly with the amount of content on the page above it.

First, lets create our HTML layout:

<div id="outer">

    <div id="container">

        <div id="header">HEADER</div>

        <div id="content">
            CONTENT<br /><br />
            CONTENT<br /><br />
            CONTENT<br /><br />
            CONTENT<br /><br />
            CONTENT
        </div>

    </div>

    <div id="footer">FOOTER</div>

</div>

The layout we’ve built contains a header, an area for content and sticky footer. Now that’s done let’s move onto the CSS to bring it to life:

html, body { height:100%; margin:0; color:#000; }

#outer { width:100%; min-height:100%; position:relative; }

#container { width:100%; padding-bottom:40px; display:table } /* padding-bottom = The footer height */

#header { height:50px; background-color:#0C0 }

#content {  }

#footer { position:absolute; bottom:0; width:100%; height:40px; clear:both; background-color:#C00 }

That’s it. A very simple way to keep the footer of your website at the bottom of the page. View the demonstration to see how our new layout looks.