Vertically align <div> contained in <td>

Question

I have something like this:

<tr>
  <td>
    <div class="blue">...</div>
    <div class="yellow">...</div>
  </td>
  <td>
    <div class="blue">...</div>
    <div class="yellow">...</div>
  </td>
</tr>

Here's a example of my current HTML: http://jsfiddle.net/DcRmu/2/

Inside a <tr>, all <td>s have the same height. I want the yellow <div>s inside those <td>s to align vertically along the bottom of <td>; and the blue <div>s to align vertically along the top of <td>. I tried to set vertical-align to bottom and it didn't work.

Thanks!

Answer 1

vertical-align:bottom; should work

Example: http://jsfiddle.net/jasongennaro/DcRmu/

EDIT

As per the new fiddle

You just need to place vertical-align:bottom; on the td not on the div

I updated your fiddle: http://jsfiddle.net/jasongennaro/DcRmu/7/

EDIT 2

I reread the question again and I saw the change

I want the yellow <div>s inside those <td>s to align vertically along the bottom of <td>; and the blue <div>s to align vertically along the top of <td>

To do this, you need to

1. set the vertical-align to top on the td
2. float the divs
3. give the bottom div a margin equal to the height of the cell minus the sum of the div heights. In this case, 200px - (50px + 50px) = 100px.

New CSS

tr td{
    width:200px;
    height:200px;
    background:red;
    vertical-align:top;
}

div.blue{
    width:50px;
    height:50px;
    background:blue;
    float:left;
}
div.yellow{
    width:50px;
    height:50px;
    background:yellow;
    float:left;
    clear:both;
    margin-top:100px;
}

Working example: http://jsfiddle.net/jasongennaro/DcRmu/9/