Why doesn't CSS place exactly n squares into a div container?

Question

I am trying to make a data-box in CSS. But when I tried to place 5 input squares that each is 30x30 pixel into the container div that is 150x150px,but it doesn't fit completely to the container. 4 of them are placed and the last one is placed into just below. I can't find why it happens. How can I fix this problem?

.box-container {
  width: 150px;
  height: 150px;
  border: 1px solid black;
}
.machine-box {
  color: darkgreen;
  font-size: 10px;
  width: 20%;
  height: 20%;
  float: left;
}

<div class="box-container">
  <input type="text" class="machine-box">
  <input type="text" class="machine-box">
  <input type="text" class="machine-box">
  <input type="text" class="machine-box">
  <input type="text" class="machine-box">
</div>

Or also [HTML input element wider than Containing Div](http://stackoverflow.com/q/1633522/1529630) or [Text input with 100% width inside a td expands/continues outside the td](http://stackoverflow.com/q/7525675/1529630) — Oriol, May 02 '16 at 00:21

score 2 · Answer 1 · answered May 02 '16 at 00:06

By default, width sets the width of the content area, so it does not include borders nor paddings.

Use box-sizing: border-box to change this behavior.

.box-container {
  width: 150px;
  height: 150px;
  border: 1px solid black;
}
.machine-box {
  color: darkgreen;
  font-size: 10px;
  box-sizing: border-box;
  width: 20%;
  height: 20%;
  float: left;
}

<div class="box-container">
  <input type="text" class="machine-box">
  <input type="text" class="machine-box">
  <input type="text" class="machine-box">
  <input type="text" class="machine-box">
  <input type="text" class="machine-box">
</div>

score 2 · Answer 2 · answered May 02 '16 at 00:07

It is because of the border. I added box-sizing:border-box; to your input boxes. Check the result here:

https://jsfiddle.net/4hd9v6t1/

By default, input elements have a border. You can either remove it or make it stay inside the element's size, by using box-sizing:border-box;.

Here's more info: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

score 2 · Accepted Answer · answered May 02 '16 at 00:10

You should look into box-sizing property. By default, it is set to content-box. width: 20%; on the .machine-box doesn't include the borders, margins, and paddings on the input element.

If you apply box-sizing: border-box; on the .machine-box, borders, margins, and paddings will be part of that width: 20% and they'll fit nicely.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

.container{
    width:500px;
    height: 100%;
    border: 1px solid black;
    display: table;
}
.job-box{
    width: 150px;
    height: 170px;
    float:left;
    border: 1px solid black;
}
.job-title{
    width: 150px;
    height: 20px;
    line-height: 20px;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    border: 1px solid black;
}
.box-container{
    width: 150px;
    height: 150px;
    border:1px solid black;
}
.machine-box{
    color: darkgreen;
    font-size: 10px;
    width: 20%;
    height: 20%;
    float :left;
    box-sizing: border-box;
}

<div class="container">
    <div class="job-box">
        <div class="job-title">J1</div>
        <div class="box-container">
            <input type="text" class="machine-box">
            <input type="text" class="machine-box">
            <input type="text" class="machine-box">
            <input type="text" class="machine-box">
            <input type="text" class="machine-box">
        </div>
    </div>
</div>

Why doesn't CSS place exactly n squares into a div container?

3 Answers3