Выравнивание div в <td>к началу <td>

Question

Обновление: добавлено jsfiddle: http://jsfiddle.net/WgzgF/11/

У меня есть стол с кучей <td>. У каждого тд есть div .tdcont, который похож на обёртку всего содержимого этого тд. В .tdcont у меня есть 2 группы div .alwaystop и .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>

Проблема, с которой я столкнулся, заключается в том, что alwaystop должен выровняться с верхней границей ячейки, а below-at должен подойти под ней вот так

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

Я обнаружил, что alwaystop и below-at центрируются вертикально, как вы видите на этой скрипке http://jsfiddle.net/WgzgF/11/, поэтому, если одна из соседних ячеек в этом ряду длинная, alwaystop центрируется до высоты этого ряда, как это

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

Я хочу сделать так, чтобы alwaystop всегда начинался с вершины ячейки независимо от высоты соседних ячеек, а затем below-at. Как я могу это сделать?

Я должен добавить, что у меня содержимое alwaystop всплывает влево, как и содержимое below-at, поэтому они должны быть как 2 строки внутри этого тд.

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

Css для Alwaystop и Under-At пуст. Я перепробовал целый ряд вещей, таких как вертикальное выравнивание и абсолютное позиционирование, но ничего не получалось, и я просто сдался и удалил их.

.alwaystop{ 
}
.below-at{
}

Answer 1

Попробуйте это:

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

Answer 2

Я продемонстрировал, как @Damien предложил в комментариях:

http://jsfiddle.net/AnrietteC/WgzgF/

И, кажется, он делает то, что вы хотите, если я правильно понимаю.