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

Is it possible to use negative values in css?

Is it acceptable to utilize negative values in CSS? For instance: margin:-11px 20px -18px 0px; OR Is there a prevailing guideline that prohibits the use of negative values? ...

css

Trouble aligning 'nav' to the center of the page in the metro-bootstrap.css file

Struggling with alignment issues in my navigation list while using 'metro-bootstrap.css' from . Despite numerous attempts, I can't seem to get it right. Visit advinadv.co.uk for a closer look. Any assistance would be greatly appreciated! Be ...

htmlcsstwitter-bootstrap

The reasons behind the unsightly gaps in my table

Here is the HTML code snippet: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <script type='text/javascript' src='js/jquery-1.10.2.min.js'></ ...

htmlcss

Turn off the whole DIV container and its contents once the button is clicked

Here's an example of the HTML markup: <div id="picing-selection" class="disableMe"> <a class="upgradeSub" value="@ViewBag.Id"> Upgrade <i class="fa fa-money"></i> </a> </div> The onclick event is d ...

javascriptjqueryhtmlonclick

The banner may be cropped when viewing on lower resolutions such as mobile devices or when zoomed in

I've encountered a similar issue on a popular website, www.godaddy.com. When zooming in or accessing the site from a mobile device, the right side of the banner gets cut off. However, when viewed on a full-sized computer screen, there are no issues. M ...

phphtmlcsswebbanner

Is it possible for jquery to run an entire HTML file using ajax?

Based on information from a discussion on Stack Overflow, it seems that I can utilize the jquery getScript() method to run a remote JavaScript file loaded via Ajax. However, in my specific scenario, the script file is located within an HTML file. Is ther ...

javascriptjqueryhtmlajax

Tips for positioning the title of a card in Bootstrap-Vue

I'm currently working with the <b-card> component from bootstrap-vue and encountering an issue where I am unable to center align the title property. Does anyone have a solution for this problem? Below you can find the structure of my card, which ...

htmlvue.jsbootstrap-4bootstrap-vue

Having trouble aligning input elements in the middle of a div container

Can anyone help me with centering elements inside a div? Check out this example: I created a wrapper for the number inputs and tried applying the text-center property on them, but it's not working. I also changed the display to block, but that doesn& ...

htmlcss

Designating a class for the main block

Having an issue with a slider in uikit. When the slide changes, the visible elements also change their class to uk-active. I'm trying to select the central element from the active ones but css nth-child doesn't work. Any suggestions on how to do ...

javascriptjquerycss

Checking links with AngularJS and HTML 5

Good day everyone: It seems like a simple question, but despite spending hours searching online, I am still unable to find the solution: how can an URL be validated with the inclusion of www without using http. Here's what I have tried so far: I a ...

htmlangularjsregexvalidation

Using Python to interact with a website's Dropdown menu and trigger the submission

Looking to extract a value from a dropdown menu on a specific website using Python. The target website URL is: <select id="ctl00_ContentPlaceHolder1_drpWORK_PLACE" class="CDropDownList160PX" name="ctl00$ContentPlaceHolder1$drpWORK_PLACE"> ... </ ...

pythonhtmlmechanize

Looking to create a pop-up using javascript, css, or jQuery?

When visiting digg.com and clicking the login button, a sleek in-screen popup appears to input user data. I'm curious about the best way to achieve this on my own site. It is built with RoR and includes some Javascript elements. Searching for "javasc ...

javascriptcsspopup

reverting the effects of a javascript animation

I am expanding the size of a carousel on a specific pane by adjusting its height and position. Here is how I achieve this: if(currentPane==2) { $("#carousel").animate({height:320},1000); $("#carousel").animate({top:411},1000); $("#dropShadow") ...

javascriptjquerycsshtml

Setting a CSS style for an ASP.NET button: What you need to know!

I am facing an issue with the styling of my asp:Button. I have applied CSS styles using the cssClass property, but they are not being applied correctly. Surprisingly, when I switch to using asp:LinkButton, the styles work perfectly fine. I prefer not to us ...

asp.netcssbuttonaspbutton

Using jQuery to close a DIV with a delay

At the top of my website, I have set up an alert with a close button. The jQuery function for closing the alert is as follows: /* CLOSE ALERT BAR WITH BUTTON */ $('a.ctp-alert').click(function () { $("div.ctp-alert").slideUp(); }); While this f ...

jqueryhtmlslide

Aligning text at the center of the page, stacked on top of each other

I am struggling with creating a responsive main page for a website. I am new to this and feeling lost on how to proceed. My goal is to stack text on top of each other in a readable way while also ensuring it looks good on mobile devices. However, my curren ...

htmlcsstwitter-bootstrap

What is the best way to continuously execute the 'onclick' function using AJAX inside a specific ID?

My challenge involves implementing a new AJAX upload feature to insert a data element from the onClick event in multiple rows. The issue I am facing is that it works fine for the first row, but when I add subsequent rows, the function no longer works upon ...

javascriptjqueryhtml

My JavaScript/jQuery code isn't functioning properly - is there a restriction on the number of api calls that can be made on

Below is the code I have implemented from jquery ui tabs: <script> $(function(){ // Tabs $('#tabs1').tabs(); $('#tabs2').tabs(); $('#tabs3').tabs(); //hover states on the sta ...

javascriptjqueryhtml

Troubleshoot: OffCanvas feature in Bootstrap 5 not functioning properly within navbar on small screens

I'm having trouble implementing Bootstrap 5 OffCanvas within the Navbar on laptop/desktop screens. It seems to only work properly on mobile screens with a size of sm or lower, displaying the hamburger menu. Any suggestions on how to make it functional ...

htmlcsstwitter-bootstrapbootstrap-5

The UI gets all wonky when using ThemeRoller for jQuery

Currently, I am encountering an issue where I want to utilize ThemeRoller for implementing custom themes on my views. However, when I apply these themes, the interface ends up looking distorted, as shown in the images below: Before using ThemeRoller: Aft ...

jquerycssasp.net-mvcjquery-mobilejquery-mobile-themeroller