This CSS footer stylesheet will make a footer stick to the bottom of the page. CSS Sticky Footer
Make the Footer Stick to the Bottom of a Page
There
are several ways to make a footer stick to the bottom of a page using
CSS. But until now, they've used long and messy hacks or a lot of extra
HTML markup; this method uses only 15 lines of CSS and hardly any HTML
markup. Even better, it's completely valid CSS, and it works in all
major browsers. Internet Explorer 5 and up, Firefox, Safari, Opera and
more.
View the example CSS Sticky Footer.
How to use this footer on your website
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>
Troubleshooting
Adding margins to elements is messing up the footer.
Simply use padding instead, and all your worries will go away.
I put this on my site and it doesn't work right in browser X. You have something wrong with your code!
Check to see if the example footer page works in that browser. If it does, then you have something wrong with yours!
I don't know web design. Can you help me with this?
I
charge for website assistance by the hour, and there's a minimum charge
of 50 USD. However, there are plenty of CSS and web design forums on
the internet where you can get free help. If you really want me to fix
it, send me an email and we can discuss pricing.
The height: auto !important; and height: 100%; properties
I've been getting about an email a week informing me that the footer works fine without height: auto !important; and height: 100%;
in the wrapper selector. This is a min-height hack for IE, so if you
want the footer to stick to the bottom of the page in Internet Explorer
6, don't remove it!