Align DIV’s to bottom or baseline

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.htmlcss

Leave a Comment