Новости заплывают поверх других новостных блоков

Решил реализовать (Динамичную сетку новостей) используя "Masonry".
Все как бы хорошо новости группируются но вот не задача новости начинают заплывать друг на друга и это стало проблемой для меня.Я пытался исправить но уже нет сил.Вы скажите чтобы я выставил высоту для блоков...Но мне нужно чтобы блок сам менял высоту по наполнении.Помогите пожалуйста решить проблему может это в самом скрипте.
Сайт для просмотра
Скрипт;
Сам скрипт Masonry может в нем нужно что-то изменить

<script>
$(function() {
$('#wrapper-main').masonry({
  columnWidth: 0,
  itemSelector: '.short-item'
});});
</script>

краткая новость;

<div class="short-item">
  <span class="cat-ico {category-icon}"><img src="{THEME}/img/category-ico/{category-icon}.png" /></span>
  <h2>
   {title limit="20"}
    <i>{date=M d, Y}</i>
  </h2>
   [xfvalue_video]
   [image-1]<img src="{image-1}" class="poster" />[/image-1] 
   <p>{short-story limit="350"}</p>
   
     <span class="author-news">
      <img src="{avatar}" alt="{login}"/>
      <span>"{avtor_fullname}"</span>
      <span class="name-nic">{author} <i>(Блогер)</i></span>
     </span>
    <strong>
    <i class="view">{vote-num}</i>
    <i class="comm">{comments-num}</i>
   </strong>
</div>

CSS:

/*Краткая новость=========================================*/
.short-item {
    background:#fff;
    float:left;
    margin:5px 5px 5px 5px;
    width:300px;
    position:relative;
    
    box-shadow: 0 1px 3px rgba(34,25,25,0.4);
    -moz-box-shadow: 0 1px 3px rgba(34,25,25,0.4);
    -webkit-box-shadow: 0 1px 3px rgba(34,25,25,0.4);
    
    -webkit-transition: top 1s ease, left 1s ease;
    -moz-transition: top 1s ease, left 1s ease;
    -o-transition: top 1s ease, left 1s ease;
    -ms-transition: top 1s ease, left 1s ease;    }
.short-item img.poster {
    width:100%;
    }
.short-item p {
    position:relative;
    padding:25px;
    color:#888;
    font-size:13px;
    border-bottom:1px solid rgba(211,211,211,1.00);
    }
.short-item strong {
    float:right;
    display:block;
    padding:10px;
    }
.short-item strong i {
    margin-left:10px;
    color:#333;
    font-size:12px;
    padding-left:19px;
    width:15px;
    height:15px;
    font-style:normal;
    }
.short-item strong i.comm {
    background:url("../img/icon/comm.png") no-repeat;
    }
.short-item strong i.view {
    background:url("../img/icon/view.png") no-repeat;
    }    
.short-item h2 {
    padding:30px 30px 20px 30px;
    font-size:15px;
    text-transform:uppercase;
    }
.short-item h2 i {
    display:block;
    font-style:normal;
    font-size:11px;
    color:#777;
    }
/*==================*/
.short-item .cat-ico {
    width:40px;
    height:40px;
    position:absolute;
    top:20px;
    right:10px;
    border-radius:100%;
    }
/**/
.short-item .templates {background:rgba(11,127,184,0.8);}
.short-item  .modules {background:rgba(255,162,70,0.8);}
.short-item  .news {background:rgba(21,148,51,0.8);}
.short-item  .music {background:rgba(223,89,91,1.00);}
.short-item  .video {background:rgba(99,3,181,1.00);}

/*==================*/
.short-item .cat-ico img {
    margin:10px 10px;
    }
/**/
.short-item .author-news {float:left;margin:5px 15px 6px;overflow:hidden;width:150px;display:inline-block;}
.short-item .author-news img {float:left;display:inline;width:30px;border-radius:100%;margin-right:10px;}
.short-item .author-news span a {font-size:11px;font-style:normal;font-family: 'PT Serif Caption', serif;color:#1c94d0;}
.short-item .author-news .name-nic {display:block;text-transform:capitalize;}
.short-item .author-news .name-nic i {font-style:normal;color:#999;}
/**/
iframe, video, media {width:100%;height:200px;}    
/*END Краткая новость=========================================*/