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.

<!DOCTYPE HTML>
<html>
<head>
<!--[if lte IE 8 ]>
<script>  
    document.createElement("footer");  
    document.createElement("header");    
</script>
<![endif]-->
<style>
    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; }
</style>
</head>

<body>

    <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>

</body>
</html>

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

  1. Pingback: How to Stick a Footer to the Bottom with CSS | Web Design Dundalk by Conor Darcy

  2. Alex

    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,
    Alex

    Reply
  3. Pingback: Simple Basic Responsive Mobile Template | Conor Darcy. Web Designer.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>