What could be causing my divs to overlap one another?

I can't seem to get these divs to stack properly, they keep overlapping. I've tried removing the float and checking every attribute in the code.

I'm not sure where I'm going wrong. The structure of the rest of the page is similar, but this issue only occurs here.

Any assistance would be greatly appreciated. Thank you in advance. I'm still new to Frontend development.

.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>

htmlcss

Answer №1

In the note I mentioned previously, you need to either clear the float or include overflow: hidden in .feature-card

Using 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>

Alternatively, use 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customize the bootstrap carousel to show multiple slides at the same time

I am looking to customize the bootstrap 3 carousel in order to show multiple slides at once. I understand that I could place several thumbnails in a single slide (div .item), but the issue is that the carousel will progress through them all at once, moving ...

jquerycsstwitter-bootstraptwitter-bootstrap-3carousel

Load HTML 5 video on a webpage after all other elements have finished loading

Hello there! I'm trying to figure out a way to load an HTML 5 video after the page has already loaded. Currently, the video pauses all site interaction until it's fully loaded, but I'd prefer to have it display an image first and then autopl ...

jqueryhtmlhtml5-video

Having trouble setting a background image for my CSS button

Recently started experimenting with button styles and I wanted to create a design where there is a background image on the left of the button with text located on the right side of the image. Here's the code snippet I've been working on. Here&apo ...

cssbuttonstyling

Preserve present condition following a jQuery click event

I'm facing a challenge where I need to hide a button upon clicking another button, but the problem is that when the page refreshes, the hidden button becomes visible again. My objective is to keep it hidden even after refreshing the page and only reve ...

javascriptjqueryhtml

Simply modifying a custom attribute source using jQuery does not result in it being refreshed

Introduction: Utilizing jQuery.elevateZoom-3.0.8 to display zoomed-in images. The SRC attribute contains the path to the smaller/normal image The DATA-ZOOM-IMAGE attribute holds the path to the larger image used for zooming. Here is the HTML Code: ...

javascriptjqueryhtmlimageelevatezoom

Encountering a peculiar problem with the Bootstrap Carousel where the first slide fails to load

There seems to be an issue with the bootstrap carousel where the first slide appears empty initially, but once you slide to the second slide it starts working fine. Navigating through all slides is still possible. <div id="mediakit_carousel" class="car ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to keep track of a checkbox's value after unchecking it and then returning to the same slide?

Issue: By default, the checkbox is always set to true in the backend code. Even if I uncheck it using JavaScript, the value remains as true when switching between slides. Desired Outcome: If I uncheck the checkbox, the updated value should be saved so tha ...

javascriptc#jqueryhtmlangular

Tips on preserving CSS modifications made in Chrome Developer Tools Inspector to .vue file

Currently, I am in the process of setting up a new workflow where my goal is to streamline my work by using the Chrome DevTools Inspector to save any CSS changes directly to my .vue file. While the DevTools Workspaces feature can achieve this, it involves ...

cssvue.jsvuejs2google-chrome-devtools

Conceal elements that are overflowing slightly

I need help coming up with a purely CSS solution to hide div 3, which has extended beyond its container. Look at the picture linked below for reference. https://i.stack.imgur.com/isfvU.jpg ...

css

Can I be detected for using text expanders or copying and pasting text into a form before submitting it?

As part of my job, I write messages in text boxes on a non-secure website interface for a company. Working from the comfort of my own home on my personal PC using Google Chrome, without any spy programs installed. The company prohibits pasting messages, b ...

htmlsecurityuser-interface

Tips for altering the color of spans that share a common top position without affecting the surrounding sibling elements above or below

Is there a way to change the color of spans with the same top position, excluding sibling elements above or below, in a paragraph made up of spans? I've been working on how to change the color of the line of span tags that contain another span with t ...

jqueryhtmlcss

Click on a div in AngularJS to be directed to a specific URL

I'm currently working on developing an Angular mobile app and I want to be able to navigate to a specific URL, like www.google.com, when a particular div is clicked. Unfortunately, I'm still new to the world of Angular and struggling to achieve t ...

javascripthtmlangularjs

Issues arising from the interaction of one DIV with another DIV

I'm having trouble positioning a menu (height = 100%) next to the logo. Essentially, when the image controls the height of the DIV (container), it seems logical that adding another DIV (menu) with height: 100% inside that DIV (container) should resul ...

htmlcss

sending information through PHP and HTML

Trying to transfer data from a table search to another PHP page, here is the code: echo " 1<form action='adm_edit.php?product_code=$record[0]' method='POST'> 2<input type=submit value=Edit> 3</form> 4<form action= ...

phphtmlxhtml

Role-based dynamic layout

I am currently working on a website that requires user login functionality. To achieve this, I am utilizing materialise-css and Angularjs for the front-end development, while the back-end is powered by Java-Hibernate (as Spring is not an option in my case) ...

htmlcssangularjs

What is the reason for the Client Height value not affecting other elements?

I'm trying to set the spacing of my sidebar from the top equal to the height of the header. However, when I use clientHeight in JavaScript to get the height and then try to apply it to other elements using marginTop or top values (with position includ ...

javascripthtmlcssweb

Centering multiple nested divs inside a parent div

I am experiencing an issue with center aligning several nested divs inside a container. The contents (nested divs) are not aligning properly within its parent element. <div id="parent"> <span id="menu_0" class="d"></span> <span ...

htmlcsscss-float

Aligning content within a div block

I created a div block that houses a form structured like this: <div class="divClass"> <form id="frm" method="post" action="/NotDefinedYet/index.xhtml" class="frmClass"> <input type="text" name="j_idt9:j_idt10:Username" placehold ...

htmlcss

JQuery Powered Text Analyzer

Our team is in the process of developing a text analyzer tool to review emails before sending them out. The goal is to involve all team members in selecting the best emails to send to clients: Implemented the following HTML code: <p class="sentence" ...

jquerycsshtml

Creating a rotating circle in CSS with ion-slides: A step-by-step guide

Hello, I am attempting to develop a circular object that will rotate in the direction it is dragged. Within this circle, there are elements positioned along the border so that these elements also spin accordingly. To illustrate, below are the specific elem ...

htmlcssangularionic-frameworkionic4