浮动潜水服从/不服从垂直对齐

在垂直对齐的表单元格中:底部,我有一个或两个div。每个div都向右浮动。
据说,div不应该与底部对齐,但它们确实对齐了(我不明白,但这很好)。
然而,当我在单元格中有两个浮动div时,它们会与同一条顶线对齐。
我希望第一个较小的div一直位于底部。另一种可接受的解决方案是将其设置为表格单元格的全高。

这很难解释,所以这是代码:

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

问题如下:

1. 为什么@符号与黄色div位于同一水平?
2. 假设垂直对齐不适用于块元素(如浮动的div)1。但确实如此!
3. 我如何使@site位于底部或使其与表格单元格齐高?

我正在测试IE7和FF2。目标支持为IE6/7、FF2/3。

澄清: 目标是在表格单元格的底部有红色@, 下一个 黄色的盒子。在任一div上使用clear都会将它们放在不同的行上。 此外,单元格可以有可变的文本行,因此, 线高度 不会有帮助的。