Floated Divs Obeying / Not Obeying Вертикально-Выровнять

В ячейке таблицы, которая выровнена по вертикали: снизу, у меня есть один или два элемента 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> 

Вот проблемы:

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

Я тестирую в IE7 и FF2. Целевая поддержка IE6 / 7, FF2 / 3.

Clarification: Цель состоит в том, чтобы красный @ в нижней строке ячейки таблицы,next в желтую коробку. Использование clear на любом div будет помещать их в разные строки. Кроме того, ячейки могут иметь переменные строки текста - следовательно,line-height не поможет

Ответы на вопрос(5)

Ваш ответ на вопрос