html - Why are my divs overlapping eachother? -
these divs should under eachother, end overlapping. have tried deleting float , debugging each attribute within code.
i not sure doing wrong. rest of page has similar structure happens here.
some appreciated. in advance. new 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>
as wrote in comment above either have clear float or add overflow: hidden
.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 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>
Comments
Post a Comment