by Hazem
21. October 2009 10:42
Make the Footer Stick to the Bottom of a Page
Many of us don’t 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>
Make the Footer Stick to the Bottom of a Page | Tutorial | How to
5166bd0d-efbc-4329-b540-5bb927ec5c5f|0|.0
Tags:
Subscribe