how to make a floating div that will float at the bottom of page

Question

I want to make a floating div that will sit at the bottom of the page if bottom of current page is above window screen otherwise it will sit just above windows screen taskbar and if we scroll the page it will maintain its current position.

Solution

You need to use position: fixed

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Here's the fiddle: http://jsfiddle.net/uw8f9/

Comments

[drip]

Aren't you looking for position: fixed? w3schools.com/cssref/pr_class_position.asp

[neshpro9]

position:absolute; and then float:left;? Seriously??

[Nasz Njoka Sr.]

use z-index to make the element appear on top of every other elements on the page

[Alex von Brandenfels]

position: sticky is another good, more recent option for this, if you need the floating element to have a width based on some % of its parent. (A sticky element does need at least one sibling element after it, but you can just make a filler div)