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


Tags: html,css,xhtml,cross-browser

Problem :

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



Solution :

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"


    CSS Howto..

    How to use vertical menus in HTML and css?

    How to add vertical scrolling to Windows 8 app in snapped view

    How to break up an HTML List using CSS Only

    how to make comment div active on hover

    How to set background color in AppGyver Supersonic?

    How to ignore parent css style

    How to change hover background on links in css?

    How can I create a CSS selector to select when a link does not have a class of folder or start class starting with title?

    How to apply css to id generated dynamically?

    how can i use css selector to give style only to a first div between two divs of the same kind?

    How do I change the admin header color in Magento?

    how to save responsive menu open/close value?

    how to apply css to a link within a particular div only?

    How to create transparent text on non-transparent background

    How to put text in the upper right, or lower right corner of a “box” using css

    How is font-size not working here?

    How to load an image with css using Django

    AngularDart - How to style Component with global CSS in Google Chrome 35m (applyAuthorStyles is deprecated)

    How to avoid the pain of CSS multi-browser compatibility?

    How to make a image css not move at text?

    How to Prefix this Input element, using CSS

    How to load multiple CSS files within a JS script

    CSS can't be overwritten, no matter how ; Wordpress with responsive style_options.php

    How can I center a div

    How do I Align The Border Of Text To An Image? (HTML/CSS) | (Extra [Answered]): How do I Fullscreen with Inspect? |

    show content block on right above the content on right when displaying on mobile

    Any Idea how this web site acheives a fluid/liquid layout [closed]

    How do I scroll d3 elements while keeping a portion of the svg in a fixed position?

    CSS: How to scale an to cover entire parent
    ?

    How to hide submenu when user clicks option, but still display when user hovers over menu