How to make a footer stay at the bottom of a page

When I started building new web design projects I would always forget how to make a footer stay at the bottom of a page when there’s little or no content to push it downwards. Here’s a CSS stylesheet only solution to help keep that pesky footer at bay. (literally)

Feel free to copy, share, use and abuse the code below. It works in IE6+, FF, Safari, Chrome etc just make sure to keep in the ‘height:100%;’ and ‘height: auto !important;’ As I came across in earlier version(s) of IE (not supported) needed these.

How to make a footer stay at the bottom of a page, the usage:

For the html and body I’ve included margin:0; padding:0; as some browsers have a set default padding/gutter size from others. But these aren’t needed to achieve the main original goal.

The CSS Code:

Insert this in between the ‘head’ tags either between ‘style’ tags or a link to your main stylesheet (.css). I recommend the latter.

The bottom margin of the wrapper must be the same height as the footer and the clear attributes.

html,body {
  height:100%;
  margin:0;
  padding:0;
}

#wrapper {
  height:100%;
  min-height:100%;
  height:auto !important;
  margin:0 auto -100px;
}

#footer {
  height:100px;
}

#clear{
  height:100px;
  clear:both;
}

The HTML Code:

Make sure to include the ‘clear’ element to prevent any content overlapping near your footer later on when adding content.

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div id="wrapper">
            Website's main content goes here.
            <div id="clear"></div>
        </div>
        <div id="footer">
            Footer content goes here.
        </div>
    </body>
</html>

clear:both;

I’ve included this by default. But if your template/theme does not contain any floating elements this isn’t needed. If unsure, I would leave this in.

Implementing this solution in ASP.NET

By default every page (usually the master page) has the ‘form’ tags which will cause problems with the wrapper. Instead of using ‘#wrapper’ in the CSS, change this to .wrapper (a class) and apply ‘class=”wrapper”‘ to the form tag like so.

.wrapper{
  height:100%;
  min-height:100%;
  height:auto !important;
  margin:0 auto -100px;
}
    <form class="wrapper"></form> 

The margin of the wrapper, height of the footer and the clear div will change depending on your design. Just make sure you keep these the same height throughout.

Stuck? Need help?

I can’t solve everyone’s problems but leave comment below and I’ll help as best as I can without doing the work for you. The idea is to learn then modify and adapt to your work/design. If not, it’s a friendly place here and somebody will come to the rescue. My advice would be to start from scratch with the core CSS and HTML above then start to put other elements of your work in one by one. This is what I do when I come across with layout problems and the footer not staying at the bottom of the page.

Otherwise, I do charge an hourly rate, please contact me for further information.

As always, your feedback and comments are always appreciated below.

Special credit to Ryan Fait for the original code.