Make a Footer Stick at the Bottom of the Page

For a long time I’ve been looking for a simple solution to make a footer stick to the bottom of the page until I came across this solution. Best of all is that it works with the major browsers: Internet Explorer 5 and up, Firefox, Safari, Opera.

[topads][/topads]

This is how you do it

Add the following lines of CSS to your stylesheet. The negative value for the margin in .wrapper is the same number as the height of .footer and .push. The negative margin should always equal to the full height of the footer (including any padding or borders you may add).

* {
  margin: 0;
}
  html, body {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -4em;
}
.footer, .push {
  height: 4em;
}

Follow this HTML structure. No content can be outside of the .wrapper and .footer div tags unless it is absolutely positioned with CSS.

<html>
  <head>
    <link rel="stylesheet" href="layout.css" … />
  </head>
  <body>
    <div class="wrapper">
      <p>Your website content here.</p>
    <div class="push"></div>
    </div>
    <div class="footer">
      <p>Copyright (c) 2008</p>
    </div>
  </body>
</html>

Source: ryanfait..

[bottomads][/bottomads]

Spread the love

2 thoughts on “Make a Footer Stick at the Bottom of the Page

  1. Esau Silva says:

    My Newest Blog Post: Make a Footer Stick at the Bottom of the Page http://bit.ly/9nJZ8b #css,#html,#footer,#

  2. […] This post was mentioned on Twitter by Esau Silva. Esau Silva said: My Newest Blog Post: Make a Footer Stick at the Bottom of the Page http://bit.ly/9nJZ8b #css,#html,#footer,# […]

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.