Why i don't have my three divs in one row on my layout?

Question

I have this html

  <div class="parent">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>

i wanted this boxes to be in the same row and they to be equal. So i setted the parent div to be 100% width, and inside my items to be 33.%.

So 3 x 33.3 = 99.9.

.parent {
    width: 100%;
    border:1px solid blue;
}

.box {
    width: 33.3%;
    border: 1px solid red;
    display: inline-block;
}

body {
    margin: 0px;
    padding: 0px;
}

That should pass inside the parent which takes 100% width of the whole window.

But the box number 3 gets down instead next to box number 2. Why is that ?

Answer 1

Give the Parent box a font-size of 0. The white space between each inline-block div is causing the last one to go to the next line. Be sure to give the inline-block divs each their own regular font-sizes though so any text they have isn’t invisible.

Also, make sure the inline-block divs have “box-sizing:border-box” so that their borders are included in the 33.3% width

Basically, this:

.parent {
    width: 100%;
    border:1px solid blue;
    font-size: 0px;
}

 .box {
    width: 33.3%;
    border: 1px solid red;
    display: inline-block;
    box-sizing: border-box;
    font-size: 16px;
}

Answer 2

You can add box-sizing: border-box to your .box div so that the 1px borders are included in the width:

.box {
    width: 33.3%;
    border: 1px solid red;
    box-sizing: border-box;
    display: inline-block;
}

Answer 3

You have added several other bits to the widths of your elements. The borders will add 2px.

Also browsers add their own default settings for margin/padding.

You will often see at the top of CSS stylesheets:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

This tells the browser not only not to add its own styling but also if styling is added further down the cascade that padding and border widths should be included in the width of an element. So for example if you set a width at 100px and then add some padding to it it will still have width 100px. This can make calculating how much space is actually being taken up somewhat easier.

However, there is one more thing in the case of inline-blocks - if there is whitespace between them in the layout the browser will add a (small) whitespace between them in laying them side by side. I don't know what the ultimate recommended way of getting rid of this might be (there's lots of options if you search). This snippet just gets rid of the whitespace in the HTML text so it doesn't arise.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.parent {
  width: 100%;
  border: 1px solid blue;
}

.box {
  width: 33.3%;
  border: 1px solid red;
  display: inline-block;
}

body {
  margin: 0px;
  padding: 0px;
  width: 100vw;
}

<div class="parent"><div class="box">1</div><div class="box">2</div><div class="box">3</div>
</div>

Answer 4

a better way to do this is using flex.

#parent{
display:flex;
border:solid 1px red;}

.box{
width:33.3%;
border:solid 1px black;
text-align:center;}

<div id="parent">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>