divs won't stay in container

Question

These divs have display inline block, height and width of 50%, and no margin but they keep falling from the container. What's going wrong and how can I fix it?

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gameboard {
  border: 5px solid black;
  width: 300px;
  height: 300px;
  display: flex;
  flex-wrap: wrap;
}

.box {
  height: 50%;
  width: 50%;
  border: 1px solid black;
  display: inline-block;
  margin: 0;
}

<div class="gameboard">
  <div class="box left"></div>
  <div class="box right"></div>
  <div class="box left"></div>
  <div class="box right"></div>
</div>

score 1 · Answer 1 · answered Mar 13 '21 at 05:10

As @neatlysliced mentioned, the calculation of border is not counted. You have applied 1px border, so 2px (1px right + 1px left borders) of width is increased. You can simply add

box-sizing: border-box;

to the box class. box-sizing: border-box property will calculate width of box including any padding or border given to that element.

Here is the working demo:

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gameboard {
  border: 5px solid black;
  width: 300px;
  height: 300px;
  display: flex;
  flex-wrap: wrap;
}

.box {
  height: 50%;
  width: 50%;
  border: 1px solid black;
  display: inline-block;
  margin: 0;
  box-sizing: border-box;
}

<div class="gameboard">
  <div class="box left"></div>
  <div class="box right"></div>
  <div class="box left"></div>
  <div class="box right"></div>
</div>

@neatlysliced what unitnend side-effects are you talking about? there litterally none. `box-sizing` just determines if the width should be calculated with the border or without. In the end they way cleaner solution as you need not to relay on calculations nor to fix multiple lines if you change the broder thickness. — tacoshy, Mar 13 '21 at 10:17
@ neatlysliced I have clearly mentioned that border-box will calculate the width including any border or padding applied to it. I don't understand what do you want to point out by stating "side-effects". @tacoshy Thank you. That's perfect answer. — codingrose, Mar 13 '21 at 10:52

neatlysliced · Accepted Answer · 2021-03-13T06:38:30.753

Depending on the box-sizing you have, border width is in excess of that 50%. So each box is taking up 50% + 2px (1px border left and 1px border right and similarly for height with top and bottom borders). Fortunately, we can use built in calc() to do the math and it'll fit. The width you want will be 50% minus the collective 2px of the borders.

Edit to add: If you are on the content-box sizing, if you add padding, you may need to adjust your calc() to accommodate the additional padding as well.

      <style>

         body{
          margin: 0;
          height: 100vh;
          display: flex;
             align-items: center;
          justify-content: center;
            }
     .gameboard{
       border: 5px solid black;
         width: 300px;
           height: 300px;
         display: flex;
       flex-wrap: wrap;

     }

     .box{

      height: calc(50% - 2px);
       width: calc(50% - 2px);
       border: 1px  solid black ;
       display: inline-block;
       margin: 0;
      
         }

       </style>

     <!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="gameboard">
          <div class="box left"></div>
           <div class="box right"></div>
          <div class="box left"></div>
         <div class="box right"></div>
    </div>


</body>
</html>

Using a `calc funtion` is messy. you need to calculate the padding and the border. If you change either, you need to adjust mutliple values. The most simple solution would be to use `box-sizing-borderbox;`. It changes the width calculation by default to inlcude paddings and border in the total width. You overcomplicating the solution for non-existing side-effect. — tacoshy, Mar 13 '21 at 10:20
changing `box-sizing` from `content-box` to `border-box` makes no difference. It has no influence at all. The only thing it does is, that `content box` uses the width for the content and `border-box` the width for `content + padding + border)`. Not sure why you still keep talking about issues or side-effects. It has no influence to cause side-effects. Just try to mention one "side-effect" that could happen — tacoshy, Mar 13 '21 at 14:05
box-sizing is not inherited... The default value of `box-sizing` is `content-box` not `inherit` — tacoshy, Mar 13 '21 at 14:12
@tacoshy my bad! I honestly forgot about that, I usually set it once and forget. Thanks for your patience and kind teaching. Original poster should change the correct answer. — neatlysliced, Mar 13 '21 at 14:20

divs won't stay in container

2 Answers2