title: Floated Divs Obeying/Not Obeying Vertical-Align
body: <p>Within a table cell that is vertical-align:bottom, I have one or two divs.  Each div is floated right.<br>
  Supposedly, the divs should not align to the bottom, but they do (which I don't understand, but is good).<br>
  However, when I have two floated divs in the cell, they align themselves to the same top line.<br>
  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.</p>
  
  <p>It's difficult to explain, so here's the code:</p>
  
  <blockquote>
  <pre><code>&lt;style type="text/css"&gt; 
  table {
     border-collapse: collapse;
  }
  td {
     border:1px solid black;
     vertical-align:bottom;
  }
  .h {
     float:right;
     background: #FFFFCC;
  }
  .ha {
     float:right;
     background: #FFCCFF;
  }
  &lt;/style&gt; 
  
  &lt;table&gt; 
    &lt;tr&gt; 
      &lt;td&gt; 
        &lt;div class="ha"&gt;@&lt;/div&gt; 
        &lt;div class="h"&gt;Title Text&lt;br /&gt;Line 2&lt;/div&gt; 
      &lt;/td&gt; 
      &lt;td&gt; 
        &lt;div class="ha"&gt;@&lt;/div&gt; 
        &lt;div class="h"&gt;Title Text&lt;br /&gt;Line 2&lt;br /&gt;Line 3&lt;/div&gt; 
      &lt;/td&gt; 
      &lt;td&gt; 
        &lt;div class="h"&gt;Title Text&lt;br /&gt;Line 2&lt;/div&gt; 
      &lt;/td&gt; 
      &lt;td&gt; 
        &lt;div class="h"&gt;Title Text&lt;br /&gt;Line 2&lt;/div&gt; 
      &lt;/td&gt; 
      &lt;td&gt; 
        &lt;div class="h"&gt;Title Text&lt;br /&gt;Line 2&lt;/div&gt; 
      &lt;/td&gt; 
    &lt;/tr&gt; 
    &lt;tr&gt; 
      &lt;td&gt; 
        &lt;div class="d"&gt;123456789&lt;/div&gt; 
      &lt;/td&gt; 
      &lt;td&gt; 
        &lt;div class="d"&gt;123456789&lt;/div&gt; 
      &lt;/td&gt; 
      &lt;td&gt; 
        &lt;div class="d"&gt;123456789&lt;/div&gt; 
      &lt;/td&gt; 
      &lt;td&gt; 
        &lt;div class="d"&gt;123456789&lt;/div&gt; 
      &lt;/td&gt; 
      &lt;td&gt; 
        &lt;div class="d"&gt;123456789&lt;/div&gt; 
      &lt;/td&gt; 
    &lt;/tr&gt; 
  &lt;/table&gt; 
  </code></pre>
  </blockquote>
  
  <p>Here are the problems:</p>
  
  <ol>
  <li>Why does the @ sign sit at the same level as the yellow div?</li>
  <li>Supposedly vertical-align doesn't apply to block elements (like a floated div) 1. But it does!</li>
  <li>How can I make the @ sit at the bottom or make it full height of the table cell?</li>
  </ol>
  
  <p>I am testing in IE7 and FF2.  Target support is IE6/7, FF2/3.</p>
  
  <p><strong>Clarification:</strong> The goal is to have the red @ on the bottom line of the table cell, <em>next</em> 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, <em>line-height</em> will not help.</p>