How do I align a div at the bottom right corner of a web page even if the content is less?

Question

I have this extremely simple splash page here: http://iph0wnz.com

It has the main graphic in the middle, followed by my 'a.' logo at the bottom right. I want that logo to be aligned to the bottom right hand of the entire page, which means that if there is a lot of text content in the page, it appears after all that (i.e. it doesn't hover on top), but if there is less content -- like right now -- then it should get aligned to the very bottom of the screen, and not right after the content.

I'll try to give a textual example like I saw in How to align content of a div to the bottom?:

    -----------------------------
    | less content, no scroll   |
    |                           |
    |                           |
    |                           |
    |                        a. |
    ----------------------------- (screen height)

and

    -----------------------------
    | more content, yes scroll  |
    | the quick brown fox jump- |
    | ped over the lazy dog an- |
    | d she sells sea shells on |
    | the sea shore and some o- |
    | ther random text is put   | (screen height)
    | here so there is a scroll |
    | bar because the content   |
    | is too much for one scre- |
    | en to show. okay, I think |
    | that is enough.           |
    |                        a. |
    -----------------------------

Apart from that other question linked above, I also looked at How do I force a DIV block to extend to the bottom of a page even if it has no content? but that didn't work for me either.

I know this is dead simple, but I'm just tired of trying all the hacks and tricks I could find.

Also, I'd like to use the method to put the logo on the site when the actual content goes in - it's going to be a blog.

Note: I don't mind using JavaScript and jQuery if required to achieve this effect.

Answer 1

Try this solution:

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

found here

EDIT: too late to remember how to do it or to explain it, but if you need more help search google for "sticky footer"