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

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 using CSS only, 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 a 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 which will in turn help your coding knowledge. 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/ styling in one by one. This is what I do when I come across layout problems and need to debug the html for the footer not staying at the bottom of the page. You can debug your HTML/CSS and elements within most browsers, the common keyboard shortcut (for Windows at least) is F12, this will bring up a  new dialogue window/pop-up and you can start to inspect elements and see which CSS rules are applied to the elements.

Otherwise, get in contact with me for further information.

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

Special credit to Ryan Fait for the original code. Unfortunately he has passed away back in 2014, along with all Web Designers and Developers they’re gone but never forgotten, hopefully his code and techniques stays within the industry for a long time to come.