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"

Answer 2

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.

Answer 3

I stumbled across this thread while trying to figure out how to align a table to the lower right of a web page I'm using as the background for my browser. I used the position:absolute for the table, nested in a div, but aligned it from the other direction. Here is how the CSS looks:

    div 
        text-align:center

    table 
        position:absolute;
        top:63%;
        left:80%;
        text-align:left;
        background:rgba(0,0,0,0.4);

Afterwards, it was a matter of playing with the table width in HTML to get it where I wanted it to be. I hope this helps anyone looking to do the same thing - and thank you to the OP and those who took the time to answer the OP's question and thus my own :-)

Here is a link to a screenshot I took of the browser / desktop. You'll notice the table is in the lower right of the browser's background, but not directly on the edges.

Answer 4

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 5

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.