Why does that border not covering up its contents

Question

Here I am sharing a pen here I have inserted 6 div.squares inside of div.container I have set .squares css property float:left My doubt is- When I gave a red border to the div.container, that border doesn't cover the 6 divs(instead the border shows up only on the top of the squares)as seen in the pen According to me, that border should cover up all the squares

Click on this link to see the pen

 .square{
      padding-bottom:30%;
      width:30%;
      margin:10px; 
      background-color:brown;
      float:left;
    }
    .container{
      height:100%;
      max-width:600px;
      margin:20px auto;
      border:2px solid red;
      height:auto;
    }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>

</body>
</html>

score 0 · Answer 1 · answered Jun 09 '20 at 19:08

0

Try getting rid of height: auto. calling height twice could be causing the issue.

answered Jun 09 '20 at 19:08

Tom Mooney

23
6

score 0 · Accepted Answer · answered Jun 09 '20 at 19:23

That is because of the float: left

Check out how I did it.

.square{
      padding-bottom:30%;
      width:30%;
      margin:10px; 
      background-color:brown;
    }
    .container{
      height:100%;
      max-width:600px;
      margin:20px auto;
      border:2px solid red;

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">

  <div class="row">
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
  </div>

  <div class="row">
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
  </div>
   
  </div>

</body>
</html>

It works Thanks for the answer......dou you know how to do it if all the div.square are in div.container — Durgesh Pushpakar, Jun 09 '20 at 20:46
Yes, just remove the div.row and whatever is in the .row style, just put it in the .container style. haha — Jaocampooo, Jun 09 '20 at 21:07

Why does that border not covering up its contents

2 Answers2