Yacomini Yacomini - 4 months ago 7
CSS Question

CSS borders problems

Im currently trying to make a square with 4 small squares inside, and I have been having troubles with a way I was trying to do.
So this is the code:



#grandbox {
position: absolute;
width: 204px;
height: 204px;
border: solid thin black;
left: 40%;
top: 8%;
}
div.smallbox {
border: solid thin black;
text-align: center;
width: 100px;
height: 100px;
float: left;
line-height: 100px;
}

<div id="grandbox">
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
</div>





I wanted to make the css style of the borders:

border: 2px solid black


But if I do that the boxes just break out of the bigger box and are display vertically.

I'm pretty newbie with this, as I currently started my carreer, but I cannot understand why doesn't it work.

PS: Sorry if bad english, not my first language.

Answer

Normally, border widths are added to the given width. With the box-sizing: border-box; rule, you can include the border into the width, so that you have no break anymore. See this snippet:

#grandbox {
  position: absolute;
  width: 200px;
  height: 200px;
  border: solid thin black;
  left: 40%;
  top: 8%;
}
div.smallbox {
  border: solid thin black;
  text-align: center;
  width: 100px;
  height: 100px;
  float: left;
  line-height: 100px;
  box-sizing: border-box;
}
<div id="grandbox">
  <div class="smallbox"></div>
  <div class="smallbox"></div>
  <div class="smallbox"></div>
  <div class="smallbox"></div>
</div>

See https://developer.mozilla.org/de/docs/Web/CSS/box-sizing for more information about box-sizing.