Placing Footer at Bottom of Screen [duplicate]

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...

Excretion

A "sticky footer" is the answer. If it's not working, you're not implementing it correctly. – Slovene

You only posted half the story... where is the HTML that goes with that CSS? – Involve

That's the Footer. And I found out why there was a vertical scroll when everything was in place and it was a different object, same with the horizontal. And now the Footer still stays in it's place.... – Excretion

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/

Barilla

I like this solution better, it is nice and clean – Differentiable

I find a problem (I'm using Chrome or IE): the last words of the Lorem ipsum are hidden by the footer. – Mulciber

Answer 2

I found this: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page a while ago and use a similar method

Analogical

Answer 3

Check out the below link -

How do you get the footer to stay at the bottom of a Web page?

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

Differentiable