Stick a Footer to the Bottom – HTML5

Below is some updated/streamlined code of my earlier post on how to stick a footer to the bottom of a page whose content is not sufficient to push below the fold. Its using some HTML5 features like the ‘footer’ & ‘header’ tags & lightweight doctype. I’ve embedded the CSS but you can link to an external file. It also has a script to create the HTML5 elements in older Microsoft browsers. Its been tested on modern browsers & seems to work fine….hope it helps.

<!--[if lte IE 8 ]>
    body, html{ height:100%; margin:0; }
    .wrapper{ min-height:100%; }
    header{ height:100px; background:#CCC; overflow:auto; display:block; }
    .content{ padding-bottom: 100px; }
    footer{ height: 100px; width:100%; background:#CCC; margin-top:-100px; display:block; }


    <div class="wrapper">

         <header>This is my header!</header>
         <div class="content">This is my content!</div>

    </div><!--end wrapper-->

    <footer>This is my footer!</footer>


5 thoughts on “Stick a Footer to the Bottom – HTML5

  1. […] PLEASE NOTE: This technique has been updated & streamlined for HTML5. Click here for the updated post […]

  2. Hi,
    Nice and simple solution. Will ditch my current one in favor of this. Gonna give it a try 🙂

    Btw, in the code above the class properties are missing from the divs? Shouldn’t it be:

    This is my header!
    This is my content!

    Also, looking at several examples on the web, I’ve been wondering what the advantage of using classes instead of IDs was? For instance the wrapper and content div are most certainly to be used only once per page, why not have them as ids? Just wondering…
    Best wishes,

  3. Ah, silly me – the HTML tags have been “eaten” by the form processing… but anyway, the idea should be clear 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *