Floated Divs Obeying/Not Obeying Vertical-Align

Question

Within a table cell that is vertical-align:bottom, I have one or two divs. Each div is floated right.
Supposedly, the divs should not align to the bottom, but they do (which I don't understand, but is good).
However, when I have two floated divs in the cell, they align themselves to the same top line.
I want the first, smaller, div to sit all the way at the bottom. Another acceptable solution is to make it full height of the table cell.

It's difficult to explain, so here's the code:

<style type="text/css"> 
table {
   border-collapse: collapse;
}
td {
   border:1px solid black;
   vertical-align:bottom;
}
.h {
   float:right;
   background: #FFFFCC;
}
.ha {
   float:right;
   background: #FFCCFF;
}
</style> 

<table> 
  <tr> 
    <td> 
      <div class="ha">@</div> 
      <div class="h">Title Text<br />Line 2</div> 
    </td> 
    <td> 
      <div class="ha">@</div> 
      <div class="h">Title Text<br />Line 2<br />Line 3</div> 
    </td> 
    <td> 
      <div class="h">Title Text<br />Line 2</div> 
    </td> 
    <td> 
      <div class="h">Title Text<br />Line 2</div> 
    </td> 
    <td> 
      <div class="h">Title Text<br />Line 2</div> 
    </td> 
  </tr> 
  <tr> 
    <td> 
      <div class="d">123456789</div> 
    </td> 
    <td> 
      <div class="d">123456789</div> 
    </td> 
    <td> 
      <div class="d">123456789</div> 
    </td> 
    <td> 
      <div class="d">123456789</div> 
    </td> 
    <td> 
      <div class="d">123456789</div> 
    </td> 
  </tr> 
</table> 

Here are the problems:

1. Why does the @ sign sit at the same level as the yellow div?
2. Supposedly vertical-align doesn't apply to block elements (like a floated div) 1. But it does!
3. How can I make the @ sit at the bottom or make it full height of the table cell?

I am testing in IE7 and FF2. Target support is IE6/7, FF2/3.

Clarification: The goal is to have the red @ on the bottom line of the table cell, next to the yellow box. Using clear on either div will put them on different lines. Additionally, the cells can have variable lines of text - therefore, line-height will not help.

Answer 1

i've found this article to be extremely useful in understanding and troubleshooting vertical-align:

Understanding vertical-align, or "How (Not) To Vertically Center Content"