CSS not clearing div elements on mobile / responsive design-CodePudding

We are working on a project and cant seem to get the responsive divs to behave correctly. They are running into other div elements on the page instead of clearing them. We are using bootstrap 4.3.1 and we need some help

Here's the webpage so you can see what's happening.

Any help would be appreciated!

/* Create two equal columns that floats next to each other */

.column_left {
  float: left;
  width: 50%;
  padding: 10px;
  height: 250px;
  margin-bottom: 5px;
  border-radius: 10px;
  background: #E6E6E8;
}

.column_right {
  float: right;
  width: 50%;
  padding: 5px;
  height: 250px;
  margin-bottom: 5px;
  border-radius: 10px;
  background: #E6E6E8;
}

.setADS {
  float: right;
  margin: 0px;
}


/* Clear floats after the columns */

.setADS:after {
  content: "";
  display: table;
  clear: both;
}


/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {
  .column_left,
  .column_right {
    width: 100%;
    bottom: 0;
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div >
  <div  style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div  style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div  style="background-color:#aaa;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
  <div  style="background-color:#bbb;">
    <h2>Column 4</h2>
    <p>Some text..</p>
  </div>
</div>

CodePudding user response：

The structure of your page is not ok. That's why you are having issues also if you solve this problem you will have problems afterward as well I Will give you a basic structure from where you can start or maybe put your code blocks in that structure.

Also in column1 column2 ... do not use custom styling if you want to remove spacing between the blocks/columns just use the predefined class in bootstrap with row class which is no-gutter

After your header put this structure.

<div >
  <div >
    <div >
      ... put your listing here.
    </div>
    <div >
      <!--Below is the solution for your divs column1, column2 .....-->
    <div >
      <div >column 1</div>
      <div >column 2</div>
    </div>
    <div >
      <div >column 3</div>
      <div >column 4</div>
    </div>
    </div>
  </div>
</div>

CodePudding user response：

try to create a common class name to all the items you want to be together, and use flex:50%

.item {
  width: 100%
}

.root {
  display: flex;
  flex-wrap: wrap;
}

.root > div {
  flex: 50%; /* or - flex: 0 50% - or - flex-basis: 50% - */
  box-shadow: 0 0 0 1px black;
  margin-bottom: 10px;
}

<div >
  <div >Content 1</div>
  <div >Content 2</div>
  <div >Content 3</div>
  <div >Content 4</div>
</div>

something like that

CodePudding user response：

It's not 100% clear what you want, but if your add overflow: auto; to the #public-listings element, this will include its floated child elements and therefore put the subsequent element below it, preventing the described overlap.