Advertisement
Make the Footer Stick to the Bottom of a Page
Make the Footer Stick to the Bottom of a Page
Many of us dont know how to make the sticky footer at the bottom of page using CSS stylesheet.
Now is the time to learn it !
There are several ways to make a footer stick to the bottom of a page using CSS which works on all the major browsers; Internet Explorer 5 and up, Firefox, Safari, Opera and others.
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).
Step 1:
Copy down this code to any text file and save it as “style.css”
* {
margin: 0;
}
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
#footer, .blank {
height: 4em;
}
Step 2:
Now use this HTML Structure. Nothing should be outside of the #wrapper and #footer div tags unless it is absolutely positioned with CSS StyleSheet.
Copy down this code to a new text file and save it as “index.html”
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="wrapper">
<p>Your Content here.</p>
<div class=”blank”></div>
</div>
<div id=”footer”>
<p>Copyright (c) 2008 Pegor.com</p>
</div>
</body>
</html>
Now put both files in same directory, and you are done ! 
And thats it, easy.. isnt it ?
FAQ
Q. Adding margins to elements is messing up the footer.
A. Use padding instead of margins.
Posted on Jul 21, 2008 at 23:10:40
very good