Let’s equalize some boxes height with CSS.
Sometimes it can be useful to get CSS results even if you don’t have any style libraries available. A case that has happened to me at times is the need to level the boxes in height, making them the same. This without being able to resort to famous libraries such as Bootstrap or something like it. In this case you can directly resort to what Bootstrap uses to work, the CSS flexbox functions.
So let’s add the flexbox properties to all those boxes, defining an arbitrary class that we will call .equalize.
/* add .equalize class to container box */
.equalize {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
Once this is done, we just need to define the width that each box will have to occupy (in my case I decide to have three boxes with a third of the total width) and define the minimum height of each box contained at 100%. In this way, each box inside our slots will occupy all the available space, reaching the height of the highest of the three.
.equalize .col-4 {
margin: 0 auto;
width: 30%;
}
.equalize > div > div {
padding: 10px;
/* add min-height to child boxes to equalize */
min-height: 100%;
}
At this point we just need to define the html of the boxes, in which to insert our contents.
<div class="equalize">
<div class="col-4">
<div id="box-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="col-4">
<div id="box-2">
</div>
</div>
<div class="col-4">
<div id="box-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
I insert the demo of the result.
That’s all, to equalize boxes height with only CSS.
Try it at home!
