How to move a div in the bottom of the windows screen

Question

I need to put a div "propped" to the bottom of the windows browsers. Like the one with chat on facebook. It must be positioned always at the bottom of the screen, also when I scroll the page.

Fixed? I know IE7 sucks on it...

How can I do it?

Answer 1

#yourdiv {
    position: fixed; /* This will be always visible and positioned where you want */
    bottom: 0; /* place it to the bottom */
    z-index: 9999; /* You may want to be sure no other elements will be displayed on top of it, raise this if it's still being displayed under other elements */
}

http://jsfiddle.net/zQNcu/9/

Position:fixed is the way to go. This is the only way to have a div being displayed at the same position regardless of page scrolling. Otherwise, if this doesn't work (older browsers perhaps), you need JS to keep it at a specific position regardless of page scroll.