Child div same size as Parent Overflows

Question

After doing many Google searches, I can't find why children of a parent with the same size are overflowing.

For example

<div style="background:blue;width:500px;height:40px">
      <div style="border:1px solid red;height:40px;font-size:0px;display:inline-block;width:30%;">
      </div>
      <div style="border:1px solid black;height:40px;font-size:0px;display:inline-block;width:70%;">
      </div>
    </div>

The code above shows the first children div tag has a height of 1px more than parent. Also when both children percent width add up to 100%, the parent still cannot fit the two divs.

Answer 1

Firstly - box model

Your border is adding size to the box, most people use box-sizing as a default these days

* {
  box-sizing: border-box
}

(if you've the option, just throw it in your global CSS and be done with it)

Highly recommend reading up on the box model, a basic understanding of that will save you much pain (or at least help you search for answers!)

With your example:

<div style="background:blue;width:500px;height:40px">
      <div style="box-sizing:border-box; border:1px solid red;height:40px;font-size:0px;display:inline-block;width:30%;">
      </div>
      <div style="box-sizing:border-box; border:1px solid black;height:40px;font-size:0px;display:inline-block;width:70%">
      </div>
    </div>

Secondly - inline-block elements

You're facing a common issue with inline block elements where whitespace between tags is affecting your rendered content.

Generally best just to use flexbox or if you're restricted to old browsers, floats

Using flexbox

<div style="background:blue;width:500px;height:40px;display: flex;">
  <div style="box-sizing:border-box; border:1px solid red;height:40px;font-size:0px;width:30%;">
  </div>
  <div style="box-sizing:border-box; border:1px solid black;height:40px;font-size:0px;width:70%">
  </div>
</div>

Using float left

<div style="background:blue;width:500px;height:40px;/* display: flex; */">
  <div style="box-sizing:border-box;border:1px solid red;height:40px;font-size:0px;width:30%;float: left;">
  </div>
  <div style="box-sizing:border-box;border:1px solid black;height:40px;font-size:0px;width:70%;float: left;">
  </div>
</div>

If you really have to use inline-block

See my links above for workarounds, all of which are unsatisfactory in some way, eg.

<div style="background:blue;width:500px;height:40px">
  <div style="box-sizing:border-box; border:1px solid red;height:40px;font-size:0px;display:inline-block;width:30%;">
  </div><!-- commenting out carriage return
  --><div style="box-sizing:border-box; border:1px solid black;height:40px;font-size:0px;display:inline-block;width:70%">
  </div>
</div>

Answer 2

Its because of box-sizing css property...its default and initial value is content-box which means the element width and height include the content, not its padding, border

You will need to set box-sizing: border-box to the div so that the padding and border will be included in the width and height of element.

And your divs are not side by side because of the display:inline-block. Thats how its works. Setting elements in one line using inline-block create spaces between them like the words when we type, its a common thing.

So to remove the space between them either you remove space in your code between these two divs or set font-size:0 to the parent div and then set font-size: initial to the child elements.

* {
  box-sizing: border-box;
}

<div style="background:blue;width:500px;height:40px;font-size:0;">
  <div style="border:1px solid red;height:40px;font-size:0px;display:inline-block;width:30%;">
  </div>
  <div style="border:1px solid pink;height:40px;font-size:0px;display:inline-block;width:70%;">
  </div>
</div>

Or another option is use Flexbox if browser support is not an issue

* {
  box-sizing: border-box;
}

<div style="background:blue;width:500px;height:40px;display:flex;">
  <div style="border:1px solid red;height:40px;font-size:0px;display:inline-block;width:30%;">
  </div>
  <div style="border:1px solid pink;height:40px;font-size:0px;display:inline-block;width:70%;">
  </div>
</div>

Answer 3

Please check this:

<div style="background:blue;width:500px;height:41px">
  <div style="border: 1px solid red;height:40px;width:29%;float:left;">
  </div>
  <div style="border:1px solid black;height:40px;width:70%; float:left">
  </div>
</div>

Answer 4

Don't forget about borders. Moreover, the childrens is inline-blocks, so the space (or tabulation) between childrens has own width. Set box-sizing: border-box and remove any spaces between blocks:

div {
  box-sizing: border-box;
}

<div style="background:yellow;width:500px;height:40px">
  <div style="border:1px solid red;height:40px;font-size:0px;display:inline-block;width:30%;">
  </div><div style="border:1px solid blue;height:40px;font-size:0px;display:inline-block;width:70%;">
  </div>
</div>

Answer 5

To solve this you need to add box-sizing: border-box to the body and white-space: nowrap; to the parent, also change display: inline-block of children

ie:

<div class="parent">
   <div class="child first"> </div>
    <div class="child second"> </div>
</div>

CSS:

body {
 -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
 -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}
.parent {
  background:blue;
  width:500px;
  height:40px; 
  white-space: nowrap;
}
.first {
  width:30%;
  border:4px solid red;
  display:inline-block;
}
.second {
  width: 70%;
  border:4px solid pink;
  display: inline-block;
}
.child {
 height:40px;
 font-size:0px;
 display:inline-block;
}

Check this https://jsfiddle.net/_ahmed_ab/4301hwmc/1/