align div in the bottom of another div using css

Question

I want to align the DIV c in the bottom of the DIV b not DIV a

<div id="a">
   <div id="b">
        <div id="c">
              Div c
        </div>
   </div>
</div>

Answer 1

This should work:

#b {
  position: relative;
}

#c {
  position: absolute;
  bottom: 0px;
}

The trick is position: relative; on the parent element. Without that, #c will float away to the bottom of the page.

Answer 2

It will take div#c out of the flow of the document. It may not be perfect, but you can do something like the following:

#b {
  position: relative;
}

#c {
  position: absolute;
  bottom: 0;
}