how to make a div to float down?

To align a div to the bottom, first you have to make the parent div's position relative, then make the required div's position to absolute and set the bottom property to zero.

<div style="position: relative; height: 100px; border: solid;">
  <div style="position: absolute; height: 10px; border: solid; bottom: 0; right: 0;  left: 0; ">
  </div>
</div>

use a clear to get the footer below the content.

simply -

#header {
 clear:both;
}
#footer {
 clear: both;
}

That should force the header to be on top, and the footer to fall below the floated elements.

The footer div will need to be either:

• position:absolute;bottom:0;; This will push it to the bottom of its container, however, when you scroll down past the container, the footer will scroll with it.

• position:fixed;bottom:0;; This is used more often for sticky footers. This will place the footer at bottom:0 of your screen. so no matter where you scroll, what you see is what you get (it will not move around while scrolling)

• position:relative;bottom:0;; could be used, but it will be relative to it's siblings (i.e. unless the content div is pushing it to the bottom, it won't go there), or, I believe if the container is relative then it may work (but please correct me if I'm wrong).

Based on your question: i want the footer div to stick at the bottom of outer wrapper. it sounds like you want to use absolute positioning for the footer, so that it'll always stick to the bottom of its container....

If you want the footer to stay on the bottom of the screen no matter where the user scrolls to, then I'd recommend fixed positioning.

Definitely check out some... tutorials and most importantly, mess around and experiment yourself!

you can make us a jsfiddle and maybe it'll shed more light on what you're trying to accomplish. good luck!

You can let the wrapper's position is relative and the inner Divs position are absolute.

<div style="position: relative; height: 200px">
    <div style="position: absolute; top: 0px; height: 20px; background-color:red">
        header
    </div>

    <div style="position: absolute; top: 20px; bottom: 20px; overflow-y: auto">
        content
    </div>

    <div style="position: absolute; bottom: 0px; height: 20px; background-color:red">
        footer
    </div>
</div>

Try this http://jsfiddle.net/YAaA3/