Make sure to apply the box-sizing:border-box
property to prevent the element from extending beyond its designated height and width.
.container{
box-sizing: border-box;
border: 1px solid #f2f2f2;
width:50px;
height:50px;
background:red;
float:left;
}
.box1{
background:green;
float:left;
width:50px;
margin-left:15px;
height:50px;
}
.box2{
background:yellow;
float:left;
width:50px;
margin-left:15px;
border: 1px solid #f2f2f2;
height:50px;
}
.overall{
background:#353535;
height:100vh;
padding:50px;
}
<div class="overall">
<div class="container">
</div>
<div class="box1">
</div>
<div class="box2">
</div>
</div>
Notice that .container
, .box1
, and .box2
all have the same width and height set.
Using the box-sizing
property ensures that the first box remains within its boundaries and does not overlap with neighboring elements.
Take a look at the yellow box, which also has matching dimensions. Without using box-sizing, it would extend beyond its intended size.