Placing Footer at Bottom of Screen

Question

Possible Duplicate:
CSS sticky footer

I had this problem for quite a while now and the problem is with all my footers. Everytime I place in this code syntax:

  <Footer>
    <p class="About">DESIGN BY MICHAEL & CODE BY ROKO</p>
  </Footer>

Footer {
display:block;
position: absolute;
bottom: 0;
width: 100%;
height: 141px;
background: url(../assets/content/footer.png) repeat-x left bottom;
}

The footer is either placed at the bottom but when you scroll, it stay where it is and there footer is pretty much half way up the page, or the text that's supposed to be within' the footer is at the top of the page.

Could anyone please help me? I tried to look up Sticky Footer and the result was still the same...

Answer 1

I do something like this and it works pretty well:

<div class="footer" id="footer">My Footer</div>

#footer
{
    clear: both;
    border: 1px groove #aaaaaa;
    background: blue;
    color: White;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    line-height: normal;
    margin: 0;
    position: fixed;
    bottom: 0px;
    width: 100%;
}

You can see an example here: http://jsfiddle.net/RDuWn/