Issue with space between two divs in one

Question

I have created two div in one line.

Below is code

  .best-seller-new-products {
    border: 1px solid #fff;
    margin-top: 20px;
  }

  .float-child-best-new {
    width: 48%;
    float: left;
    border: 1px solid red;
    margin: 0 11px;
    margin-top: 20px;
  } 

<!-- Start best seller and new products -->
<div class="best-seller-new-products">
  <div class="float-child-best-new">
    bestseller products
  </div>
  <div class="float-child-best-new">
    new products</div>
  </div>
</div>
<!-- End best seller and new products  -->

The result:

Issue description

When I add: width: 50%;, the width of the elements is matched to the rest of the others at the top and bottom.

But when I add width 50%; to this code:

    margin: 0 11px;

then they are not inline

I also tried:

    width: 48%;
    margin: 0 11px;

then is in one line but then these elements are too short to fit in with the rest of the page.

Question:

How to make spaces between these divs so that the left and right sides match the rest page and are not shortened? (first div truncate only on the right, second div truncate just on the left) to make spaces between.

Answer 1

Here is how you can do it with flexbox.

.best-seller-new-products {
  border: 1px solid #fff;
  margin-top: 20px;
  display: flex;
  /* Set display of parent block as flex*/
  justify-content: space-between;
  /* this will make sure any left over space is between the children */
}

.float-child-best-new {
  width: 48%;
  /*Set the width of the children according to your needs*/
  border: 1px solid red;
  margin-top: 20px;
}

<!-- Start best seller and new products -->
<div class="best-seller-new-products">
  <div class="float-child-best-new">
    bestseller products
  </div>
  <div class="float-child-best-new">
    new products</div>
</div>
</div>
<!-- End best seller and new products  -->