Aligning divs in <td> to top of <td>

Question

Update: added jsfiddle: http://jsfiddle.net/WgzgF/11/

I have a table with a bunch of <td>. Each td has a div .tdcont which is like a wrapper of all content in that td. In .tdcont, I have 2 groups of divs .alwaystop and .below-at.

<td class="table-td">
   <div class="tdcont">
      <div class="alwaystop">           
         <div class="at1">at1</div>
         <div class="at2">at2</div>
         <div class="at3">at3</div>
      </div>            
      <div class="below-at">
         <div class="bat1">bat1</div>
         <div class="bat2">bat2</div>
         <div class="bat3">bat3</div>
      </div>
   </div>
</td>

The problem I'm having is that alwaystop is supposed to align itself to the top border of the cell and below-at is supposed to come right under it like this

_____________________________________________________
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        |                |
__________________|_________________|________________|      

What I'm finding is that alwaystop and below-at center themselves vertically like you see in this fiddle http://jsfiddle.net/WgzgF/11/ so if one of the adjacent cells in this row is long, alwaystop centers itself to this row's height like this

_____________________________________________________
                  | 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        |                |
__________________|_________________|________________|      

What I want to do is make alwaystop always start from the top of the cell regardless of adjacent cells' heights, then the below-at comes under it. How can I do this?

I should add that I have the content of alwaystop is floated left, so is the content of below-at, so they're supposed to be like 2 rows inside that td.

.at1, .at2, .at3{ 
   float:left; 
}
.bat1, .bat2, .bat3{ 
   float:left; 
}

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.

.alwaystop{ 
}
.below-at{
}

Answer 1

Try this:

.table-td {
    border: 1px solid red;
    vertical-align: top;
}