Проблема выравнивания столбца CSS

Question

Я использую CSS для создания трех столбцов. Я хотел немного подражать тому, что делает пинтрист. Он работает, но есть небольшая проблема выравнивания.

Как вы можете видеть, верхи не идеально выровнены.

Мой CSS для коробок

.formBox{ 
    width:238px; 
    height:auto; 
    background-color:white; 
    box-shadow:0 0 5px rgba(0,0,0,0.1); 
    margin-bottom:35px; 
    display: inline-block; 
    -webkit-column-break-inside: avoid; 
    -moz-column-break-inside: avoid; 
    column-break-inside: avoid; 
    opacity: 1; 
} 

Мой CSS для макета сетки

#homepageIndent{ 
    float:left; 
    margin-top:30px; 
    width:100%; 
    -webkit-column-count: 3; 
    -webkit-column-fill: auto; 
    -webkit-column-gap:10px; 
    -moz-column-count: 3; 
    -moz-column-fill: auto; 
    -moz-column-gap: 10px; 
    column-count: 3; 
    column-fill: auto; 
    column-gap:10px; 
} 

Мой HTML

<div id="homepageIndent"> 
    <div class="formBox"> 
     <a href="link"> 
      <div class='thumbnailImage' style="background-image:url('imagelink');"></div> 
     </a> 
     <div class="description"> 
      <a href="link">title</a> 
     </div> 
     <div class="tagsContainer"> 
      <a href="link"> 
       <div class="tag"> 
        tag 
       </div> 
      </a> 
     </div> 
    </div> 
</div> 

Answer 1

попробовать что-то вроде этого, если ваша страница фиксированная ширина:

<div class="clearfix"></div> 
<div class="wrapper"> 
    <div class="col first"> 
     <a href="link"> 
     <img url="imagelink" /> 
     </a> 
    </div> 
    <div class="col"> 
     <a href="link">title</a> 
    </div> 
    <div class="col last"> 
     <a href="link">title</a> 
    </div> 
</div>  
<div class="clearfix"></div> 

и CSS:

.clearfix:after { 
    content: " "; /* Older browser do not support empty content */ 
    visibility: hidden; 
    display: block; 
    height: 0; 
    clear: both; 

} 

.wrapper { 
    width: 770px; // content full width = 3*col width + 4*col side margin 
    background: #ededed; 
    border: 1px solid #ccc; 
    overflow: hidden; 
} 

.col { 
    float: left; 
    width: 230px; 
    margin: 10px 0px 10px 20px; // top, right, bottom, left margin 
    background: #ccc; 
} 

Вот скрипку: http://jsfiddle.net/Pxuk5/