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>

How to Stick a Footer to the Bottom with CSS

+++++++++++++++++++++++++++++++++++++++++++++++++++++
PLEASE NOTE: This technique has been updated & streamlined for HTML5.
Click here for the updated post
+++++++++++++++++++++++++++++++++++++++++++++++++++++

CSS footer problem

Ideally we want the situation above, where the footer naturally rests on the bottom of the browser irrespective of the amount of content on the page. In a nutshell, you need to set the height of a container layer or div to 100% and create a content div and a footer div within this.

The content div’s height is also set at 100%. This will push the footer off the bottom of the page, immediately below the fold. Lets say you want the footer to be 100px high.

 

Now set the bottom padding of the content div to 100px. This will create empty space at the bottom of the div for the footer to fit into. Finally, set the top margin of the footer to -100px. This will move the footer up into the 100px space you created with the contents bottom padding.

Simples:)

I’ve created a starting template for all sites I create. You can download it here.

It contains a html file & css starting point. I’ve also added a header along with the footer & content divs. Its 800px wide and centred. its fairly simple to figure out & modify. Have a look.