CSS pływające dziwne zachowanie - html, css

Mam problem z pływającymi div w szablonie responsywnym. Możesz zobaczyć puste przestrzenie na obrazkach poniżej. I dzieje się tak nie na każdej stronie, na niektórych blokach stron wypełnia się właściwie całą przestrzeń.

Oto kod prostego bloku:

<div class="movie-item ignore-select short-movie">
<div class="movie-img img-box">
<img src="/images//templates/movie-groovie/dleimages/no_image.jpg" alt="text" />
<i class="fa fa-info show-desc"></i>
<div class="movie-img-inner">
<i class="fa fa-play-circle-o go-watch pseudo-link" data-link="#"></i>
</div>
<div class="movie-series">Поле зеленое</div>
<span>доп поле</span>
</div>
<a class="movie-title" href="#">TITLE</a>
<div class="movie-tags nowrap">Some text</div>
<div class="movie-desc">
<div class="movie-date">2 март 2017</div>
<div class="movie-director"><b>Доп поле название:</b> доп поле Джеймс Кэмерон</div>
<div class="movie-text">Some text</div>

<div class="movie-rate"><i class="fa fa-thumbs-o-up"></i><span id="ratig-layer-5846" class="ignore-select"><span class="ratingtypeplus ignore-select" >0</span></span></div>

</div>
</div>

i to jest styl:

.short-movie {
float: left;
width: 18%;
margin: 0 1% 20px 1%;
}

styles.css:146
.movie-item {
position: relative;
z-index: 50;
margin: 0 10px;
max-width: 200px;
}

.movie-img {
height: 210px;
z-index: 50;
border: 4px solid #fff;
box-shadow: 0 0 0 1px #e3e3e3;
border-radius: 2px;
}

styles.css:6
.img-box {
overflow: hidden;
position: relative;
}

.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
styles.css:155
.show-desc {
position: absolute;
right: 0;
top: 0;
z-index: 150;
font-size: 18px !important;
cursor: pointer;
border-radius: 0 0 0 3px;
background-color: #fff;
color: #487a1b;
width: 30px;
height: 30px;
line-height: 30px !important;
text-align: center;
}

.movie-img-inner {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
border: 5px solid #97ce68;
opacity: 0;
background-color: rgba(0,0,0,0.6);
}

.movie-series {
position: absolute;
left: 0;
bottom: 0;
z-index: 50;
width: 100%;
background-color: rgba(151, 206, 104, 0.8);
color: #487a1b;
padding: 10px;
font-weight: 700;
text-align: center;
}

.movie-title {
display: block;
margin: 10px 0 3px 0;
height: 36px;
overflow: hidden;
color: #333;
}
.movie-desc {
position: absolute;
left: 100%;
top: 0;
z-index: 150;
width: 400px;
padding: 20px;
background-color: #FFF;
display: none;
box-shadow: 0 0 15px 0 rgba(0,0,0,0.3);
min-height: 80px;
border-radius: 4px;
}

Nie mogę znaleźć przyczyny problemu. Próbowałem go na OS X Chrome i Safari. Czy ktoś wie, co to może być?

Odpowiedzi:

Po prostu ustaw:

.short-movie {
height: 275px;
}

Aby wszystkie elementy filmu były tej samej wysokości i nie miały wpływu na wysokość poprzednich elementów.

Ustaw standardową wysokość dla tego div, na przykład

.img-box
{
height:300px;
}