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 http://stackoverflow.com/questions/585945/how-to-align-content-of-a-div-to-the-bottom-with-css:

    -----------------------------
    | 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 http://stackoverflow.com/questions/147528/how-to-force-a-div-block-to-extend-to-the-bottom-of-a-page-even-if-it-has-no-con 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 using position: absolute along with javascripts screen.height.

Don't think it's the best solution but it worked for me a while ago. Probably this can be achieved even better with jQuery, but I didn't try it.

Answer 2

Using JavaScript : get your screen height, then dynamically create your or whatever, then

position:absolute;
top:<your document height>

Should put your div at the bottom. Do the same for right alignment. Though, i can't guarantee result on all browser.

Answer 3

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"

Answer 4

Something slightly different but equally useful for you might be:

position: fixed;
bottom: 0;
right: 0;

This will keep your div in the bottom right corner of the screen at all times and content will flow behind it (somewhat similar to background-attachment: fixed;). Maybe not exactly what you're looking for, but definitely easier than some of the other hacks out there. Note that this won't work in IE6.