Tag Archives: Web

Stick a Footer to the Bottom – HTML5

Posted on by
5

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>