how to make a div to float down?

Question

I have 4 divs. One is outer wrapper, and other 3 are header, content and footer respectively. All the are of same(fixed) width. But height of outer wrapper and content div are variable.

irrespective of the size of these, i want the footer div to stick at the bottom of outer wrapper. I have tried using the following CSS

position: relative;
bottom: 0px;

But it didn't work. Does anybody know a solution?

Answer 1

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>