Footer Not Stick To Bottom Of The Page

i can't find the reason why the 'footer' don't stick to the end of the page,and the body is not really 100% height. I have the code in this link: https://dl.dropbox.com/u/107452929

Solution 1:

Add position:fixed

footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 30px;
}

---

If you want footer to stick to the bottom of the page then you need to add a div to wrap the entire code and give position:relative to wrapper div and retain your footer css as it is.

In this case footer has parent div to apply the absolute position but in your current code you don't have parent div to place the absolute position.

HTML

<divclass="wrapper">
your full html code here
</div>

CSS

.wrapper{
position:relative;
height:auto;
}

LIVE DEMO

---

If you are not particular about position:absolute then you can just change that to position:relative and place the footer html tag to the end of the page. In this case you need not to add the wrapper div.

DEMO 2

Solution 2:

If you want to put your footer at the end of the entire page, then you have nothing to do, no absolute, no fixed : just a block after all the others.

Solution 3:

Try to use min-height:100% to the body. And give display:inline-block to the wrapper of your content

Solution 4:

Try this:

.footer {position:absolute;bottom:0;left:0;}