Merhaba. Fotoğraf sitem için Pinterest tarzı bir tasarım düzenliyorum. Oluşturduğum div'ler otomatik sıralanırken bazıları ikiye bölünüyor. Bütün kodları elden geçirdim çözemedim yardımcı olursanız sevinirim.

<div class="container">
  <div id="columns">
    <div class="span3">
      <div class="image-galery">
          <img src="resim-url" />
       </div>
       <div class="tags-galery">#<a href="link">başlık</a></div>
    </div>
..
...
....
.....
......
  </div>
</div>

#columns {
    -webkit-column-count: 5;
    -moz-column-count: 5;
    column-count: 5;
}
.container {
    width: 1170px;
}
.span3 {
    margin:5px;
    width: 220px;
    opacity:0.7;
}
.image-galery{
    border: 1px solid #fafafa;
    width: 90%;
    margin: 20px auto;
}

.image-galery img{
    width:100%;
}
.tags-galery{
    text-align:center;
    width: 90%;
    margin: 0 auto 10px auto;
}

.tags-galery a{
    text-decoration:none;
}

.tags-galery a:hover{
    color: #555;
    text-decoration:underline;
}

Ekran görüntüsü şöyle oluyor


Abdullah Gül'ün fotoğrafın altında olması gereken taglar sağ tarafta yukardan devam ediyor. span3 ü bölmeden otomatik sıralama yapılmasını istiyorum.