title: Aligning divs in <td> to top of <td>
body: <p>Update: added jsfiddle: <a href="http://jsfiddle.net/WgzgF/11/" rel="nofollow noreferrer">http://jsfiddle.net/WgzgF/11/</a></p>
  
  <p>I have a table with a bunch of <code>&lt;td&gt;</code>. Each td has a div <code>.tdcont</code> which is like a wrapper of all content in that td. In <code>.tdcont</code>, I have 2 groups of divs <code>.alwaystop</code> and <code>.below-at</code>. </p>
  
  <pre><code>&lt;td class="table-td"&gt;
     &lt;div class="tdcont"&gt;
        &lt;div class="alwaystop"&gt;           
           &lt;div class="at1"&gt;at1&lt;/div&gt;
           &lt;div class="at2"&gt;at2&lt;/div&gt;
           &lt;div class="at3"&gt;at3&lt;/div&gt;
        &lt;/div&gt;            
        &lt;div class="below-at"&gt;
           &lt;div class="bat1"&gt;bat1&lt;/div&gt;
           &lt;div class="bat2"&gt;bat2&lt;/div&gt;
           &lt;div class="bat3"&gt;bat3&lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>The problem I'm having is that <code>alwaystop</code> is supposed to align itself to the top border of the cell and <code>below-at</code> is supposed to come right under it like this</p>
  
  <pre><code>_____________________________________________________
  at1 at2 at3       | at1 at2 at3     | at1 at2 at3    |
  bat1 bat2 bat3    | bat1 bat2 bat3  | bat1 bat2 bat3 |
  small image here  | big image here  |                |
                    | is taking lots  |                |
                    | of space        |                |
  __________________|_________________|________________|      
  </code></pre>
  
  <p>What I'm finding is that <code>alwaystop</code> and <code>below-at</code> center themselves vertically like you see in this fiddle <a href="http://jsfiddle.net/WgzgF/11/" rel="nofollow noreferrer">http://jsfiddle.net/WgzgF/11/</a> so if one of the adjacent cells in this row is long, <code>alwaystop</code> centers itself to this row's height like this </p>
  
  <pre><code>_____________________________________________________
                    | at1 at2 at3     |                |
                    | bat1 bat2 bat3  |                |
  at1 at2 at3       | big image here  | at1 at2 at3    |
  bat1 bat2 bat3    | is taking lots  | bat1 bat2 bat3 |
  small image here  | of space        |                |
  __________________|_________________|________________|      
  </code></pre>
  
  <p>What I want to do is make <code>alwaystop</code> always start from the top of the cell regardless of adjacent cells' heights, then the <code>below-at</code> comes under it. How can I do this?</p>
  
  <p>I should add that I have the content of <code>alwaystop</code> is floated left, so is the content of <code>below-at</code>, so they're supposed to be like 2 rows inside that td. </p>
  
  <pre><code>.at1, .at2, .at3{ 
     float:left; 
  }
  .bat1, .bat2, .bat3{ 
     float:left; 
  }
  </code></pre>
  
  <p>The css for alwaystop and below-at is empty. I tried a whole bunch of stuff like vertical-align and absolute positioning, but nothing worked and I just gave up and deleted them. </p>
  
  <pre><code>.alwaystop{ 
  }
  .below-at{
  }
  </code></pre>