Align DIV's to bottom or baseline

Question

I'm trying to align a child div tag to the bottom or baseline of the parent div tag.

All I want to do is have the child Div at the baseline of the Parent Div, here is what it looks like now:

HTML

<div id="parentDiv"> <div class="childDiv"></div> </div> 

CSS

#parentDiv {   width:300px;   height:300px;   background-color:#ccc;   background-repeat:repeat } #parentDiv .childDiv {   height:100px;   width:30px;   background-color:#999; } 

Note

I will have multiple childDivs with varying heights, and I'll need them all to align to the baseline/bottom.

Answer 1

You need to add this:

#parentDiv {   position: relative; }  #parentDiv .childDiv {   position: absolute;   bottom: 0;   left: 0; } 

When declaring absolute element, it is positioned according to its nearest parent that is not static (it must be absolute, relative or fixed).

Answer 2

Seven years later searches for vertical alignment still bring up this question, so I'll post another solution we have available to us now: flexbox positioning. Just set display:flex; justify-content: flex-end; flex-direction: column on the parent div (demonstrated in this fiddle as well):

#parentDiv {   display: flex;   justify-content: flex-end;   flex-direction: column;   width:300px;   height:300px;   background-color:#ccc;   background-repeat:repeat }