Как выровнять один div в верхней части, а другой - с botton той же ячейки?

Question

Я пытаюсь создать раскладку из двух столбцов с разделителем между столбцами. Моя проблема заключается в том, что разделитель я хочу сделать. Я разметкой, как следующее:

<div style="display:table"> 

    <!--Left Column--> 
    <div class = "cell" style="min-width:200px;">    
     ...content 
    </div> 

    <!--Divider Column--> 
    <div class="cell vr">    
     <div class="t"></div> 
     <div class="b"></div> 
    </div> 

    <!--Right Column--> 
    <div class="cell" style="width:100%;">    
     ...content 
    </div> 

</div> 

CSS:

div.cell { display:table-cell; overflow:hidden;vertical-align:top;} 
    /*Vertical Rule*/ 
    .vr {background:url(Img/vGradient.png) repeat-y; width:6px; position:relative;} /*Vertical Rule Gradient*/ 
    .vr .t {background:url(Img/vGradientT.png) repeat-x; width:6px; height:50px; position:absolute; top:0;} /*Top Of Rule*/ 
    .vr .b {background:url(Img/vGradientB.png) repeat-x; width:6px; height:50px; position:absolute; bottom:0;} /*Bottom Of Rule*/ 

Так что я пытаюсь получить среднюю клетку, чтобы иметь фоновое изображение по всей его высоте, а затем иметь верхнее изображение Нахлест верхняя часть сверху, а нижнее изображение делителя перекрывает его в нижней части ячейки.

Не удалось заставить его работать. Это можно сделать?

UPDATE: Это работает ... но это заставляет меня задать высоту, а не иметь делитель быть таким же высоким, как таблица должна быть ....

<div class="cell">   
     <div class="vr" style="height:300px"> 
      <div class="t"></div> 
      <div class="b"></div> 
     </div> 
    </div> 

Answer 1

попытка установить высоту для .vr класс, иногда не имеющий определенных высоты.

.vr {background:url(Img/vGradient.png) repeat-y; width:6px; height:300px; position:relative;} /*Vertical Rule Gradient*/