CODEWITHSUNDEEP
htmlcss
derpyderp
derpyderp

Reputation: 343

Why are child divs overflowing the parent container?

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..

enter image description here

This is the result I am getting...

enter image description here

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>

Any help would be great..

Cheers

Upvotes: 1

Views: 4836

Answers (3)

Michael Benjamin
Michael Benjamin

Reputation: 370993

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:

enter image description here

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:

Upvotes: 3

Deepak Yadav
Deepak Yadav

Reputation: 7069

* {
  box-sizing: border-box;
}
/* you missed this property*/

.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: 100px;
  /* gave it for demo purpose*/
  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>

You forgot to declare box-sizing property. You can read about Box Sizing here Buddy, you can check, what box-sizing is on SO itself. What is use of box sizing in CSS

Upvotes: 1

Anubhav pun
Anubhav pun

Reputation: 1323

use this in your style may help you

*
{
    box-sizing:border-box;
}

Upvotes: 1

Related Questions