Hello. Can anyone explain how to align a footer div to the bottom of the page. From the examples I've seen, they all show how to make the div stay visible at the bottom, no matter where you've scrolled the page. Although I don't want it like that. I want it fixed at the bottom of the page, so it doesn't move. Appreciate the help!
+1
A:
This will make the div fixed at the bottom of the page but in case the page is long it will only be visible when you scroll down.
<style type="text/css">
#footer {
position : absolute;
bottom : 0;
height : 40px;
margin-top : 40px;
}
</style>
<div id="footer">I am footer</div>
The height and margin-top should be the same so that the footer doesnt show over the content.
ovais.tariq
2010-08-19 19:44:26
+2
A:
Is this what you mean?
http://ryanfait.com/sticky-footer/
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.
This footer will stay at the bottom of the page permanently. This means that if the content is more than the height of the browser window, you will need to scroll down to see the footer... but if the content is less than the height of the browser window, the footer will stick to the bottom of the browser window instead of floating up in the middle of the page.
Here's another, perhaps better, solution:
http://www.cssstickyfooter.com/
Let me know if you need help with the implementation. I hope this helps.
Hristo
2010-08-19 19:53:30
+1
A:
check this out, works on firefox and IE
<style>
html, body
{
height: 100%;
}
.content
{
min-height: 100%;
}
.footer
{
position: relative;
clear: both;
}
</style>
<body>
<div class="content">Page content
</div>
<div class="footer">this is my footer
</div>
</body>
Vinay B R
2010-08-19 20:19:29
min-height doesnt work on all versions of I.E.
ovais.tariq
2010-08-20 15:47:18