CSS floating left weird behavior - html

Question

i have an issue with floating div's in responsive template. You can see empty spaces on images below. And it happens not at every page, at some pages blocks fill all space properly.
Here is the code of a simple block:
<div class="movie-item ignore-select short-movie">
<div class="movie-img img-box">
<img src="/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>
and it's styles:
.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;
}
I can't find what causes the problem. Tried it on OS X Chrome and Safari. Does anybody know what can it be?

Answer 1

Just set:
.short-movie {
height: 275px;
}
To make all movie items be of the same height and stop them being affected by the previous elements height.

Answer 2

Set standard height for this div, For Example
.img-box
{
height:300px;
}