How do I create a horizontal floating div that is always on the bottom of the page, no matter how the user scrolls?

Question

I just want that horizontal div (about 50 pixels tall) that span across the entire bottom of the page always. How?

Answer 1

take a look at position:fixed; I've used it to do this before, but you'll run into a cross browser bug with IE. I ended up using a CSS _expression() hack so that it worked in IE6/7.

Answer 2

Use the position: fixed feature in your CSS.

.footer {
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 50px; 
}

However that does not work with IE6; check this link for a workaround.