Prakash GPz Prakash GPz - 7 months ago 42
CSS Question

how to make a div to float down?

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?


To align a div to bottom, you have to first 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; ">