html - Why are child divs overflowing the parent container?

Question

I have four 25% width divs not fitting inside a 100% width div.

I'm unsure if this may have something to do with my borders or something.

So this is essentially the design I'm going for..

This is the result I am getting...

Here is the code I am using...

.main {
  width: 100%;
  height: 100%;
  border: 2px solid #73AD21;
}

.titleContainer {
  width: 100%;
  height: 10%;
  border: 2px solid yellow;
  float: left;
  display: inline-block;
}

.title {
  width: 100%;
  height: 100%;
  border: 2px solid blue;
  float: left;
}

.graphsContainer {
  position: relative;
  margin-right: 25px;
  width: 100%;
  height: 90%;
  border: 2px solid yellow;
  float: left;
  display: inline-block;
}

.graph {
  width: 25%;
  height: 25%;
  border: 2px solid purple;
  float: left;
  display: inline-block;
}

.graphImage {
  width: 100%;
  height: 90%;
  border: 2px solid blue;
}

.graphTitle {
  width: 100%;
  height: 10%;
  border: 2px solid blue;
}

<div class="main">
  <div class="titleContainer"></div>
  <div class="graphsContainer">
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
  </div>
</div>

Answer 1

To make your layout work add this line of code:

* { box-sizing: border-box; }

jsFiddle demo

---

The box-sizing property, and the difference between content-box and border-box.

Here's an illustration of the CSS box model:

With the box-sizing property, you have two options for calculating the length of an element.

The property takes two values: content-box and border-box.

With content-box (the default value), the length of the box – either width or height – includes only the content box. Neither the padding, border or margin are factored into the calculation.

In your code, the 25%-width boxes are wrapping because the 25% is applying only to the content section. But you also have a 2px border around each element. This means that the width of each box is actually: 25% + 4px. Multiply that by four and you have:

25% + 25% + 25% + 25% + 4px + 4px + 4px + 4px = 100% + 16px > 100% = wrapping

To counter this effect, CSS offers a second method for calculating length: box-sizing: border-box.

With border-box the calculation includes the content, padding and border. Hence:

25% + 25% + 25% + 25% + 4px + 4px + 4px + 4px = 100% (4px is factored into the 25%)

Further reading:

• MDN box-sizing
• CSS-Tricks box-sizing
• Learn CSS Layout box-sizing
• Paul Irish * { Box-sizing: Border-box } FTW