Ali Tor Ali Tor - 7 months ago 19
HTML Question

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

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>




Answer

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>

Comments