Why are my divs overlapping eachother? - html

Question

These divs should be under eachother, but they end up overlapping. I have already tried deleting the float and debugging each attribute within the code.
I am not sure what am I doing wrong. The rest of the page has a similar structure but it only happens here.
Some help would be appreciated. Thanks in advance. I am fairly new to Frontend.
.features-list{
width: 100%;
background-color: #ffffff;
}
.feature-card{
padding-left: 50px;
padding-right: 50px;
background: #ffffff;
border-radius: 4px;
margin-bottom: 10px;
box-shadow: 0 0 3px 1px #e0e0e0
}
.feature-container{
width: 33%;
float: left;
}
.eyecatcher{
color: #95C123;
height: 40px;
font-weight: bold;
font-size: 20px;
}
.video-explanation{
background: #7d7d7d;
padding: 45px 0;
}
<div class="features-list">
<div class="feature-card">
<div class="feature-container">
<div class="eyecatcher">
asdasdasd2
</div>
<div>
asdasdasd
</div>
</div>
<div class="feature-container">
<div class="eyecatcher">
asdasdasd2
</div>
<div>
asdasdasd
</div>
</div>
<div class="feature-container">
<div class="eyecatcher">
asdasdasd2
</div>
<div>
asdasdasd
</div>
</div>
<div class="feature-container">
<div class="eyecatcher">
asdasdasd2
</div>
<div>
asdasdasd
</div>
</div>
<div class="feature-container">
<div class="eyecatcher">
asdasdasd2
</div>
<div>
asdasdasd
</div>
</div>
</div>
</div>
<div class="video-explanation">
Video Explanation
</div>

Answer 1

As I wrote in the comment above either you have to clear the float or add overflow: hidden to .feature-card
With clear: both:
.features-list{
width: 100%;
background-color: #ffffff;
}
.feature-card{
padding-left: 50px;
padding-right: 50px;
background: #ffffff;
border-radius: 4px;
margin-bottom: 10px;
box-shadow: 0 0 3px 1px #e0e0e0
}
.feature-container{
width: 33%;
float: left;
}
.eyecatcher{
color: #95C123;
height: 40px;
font-weight: bold;
font-size: 20px;
}
.video-explanation{
background: #7d7d7d;
padding: 45px 0;
}
.feature-card:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
<div class="features-list">
<div class="feature-card">
<div class="feature-container">
<div class="eyecatcher">
asdasdasd2
</div>
<div>
asdasdasd
</div>
</div>
<div class="feature-container">
<div class="eyecatcher">
asdasdasd2
</div>
<div>
asdasdasd
</div>
</div>
<div class="feature-container">
<div class="eyecatcher">
asdasdasd2
</div>
<div>
asdasdasd
</div>
</div>
<div class="feature-container">
<div class="eyecatcher">
asdasdasd2
</div>
<div>
asdasdasd
</div>
</div>
<div class="feature-container">
<div class="eyecatcher">
asdasdasd2
</div>
<div>
asdasdasd
</div>
</div>
</div>
</div>
<div class="video-explanation">
Video Explanation
</div>
Or with overflow: hidden:
.features-list{
width: 100%;
background-color: #ffffff;
}
.feature-card{
padding-left: 50px;
padding-right: 50px;
background: #ffffff;
border-radius: 4px;
margin-bottom: 10px;
box-shadow: 0 0 3px 1px #e0e0e0;
overflow: hidden;
}
.feature-container{
width: 33%;
float: left;
}
.eyecatcher{
color: #95C123;
height: 40px;
font-weight: bold;
font-size: 20px;
}
.video-explanation{
background: #7d7d7d;
padding: 45px 0;
}
<div class="features-list">
<div class="feature-card">
<div class="feature-container">
<div class="eyecatcher">
asdasdasd2
</div>
<div>
asdasdasd
</div>
</div>
<div class="feature-container">
<div class="eyecatcher">
asdasdasd2
</div>
<div>
asdasdasd
</div>
</div>
<div class="feature-container">
<div class="eyecatcher">
asdasdasd2
</div>
<div>
asdasdasd
</div>
</div>
<div class="feature-container">
<div class="eyecatcher">
asdasdasd2
</div>
<div>
asdasdasd
</div>
</div>
<div class="feature-container">
<div class="eyecatcher">
asdasdasd2
</div>
<div>
asdasdasd
</div>
</div>
</div>
</div>
<div class="video-explanation">
Video Explanation
</div>