Align divs with position relative horizontally - html

Question

I have 3 divs inside a div and I want these 3 divs to align horizontally. I was able to do this by giving absolute position but I want them to have relative position. Why I want it to have relative position is, if I zoom out or zoom in, the div size won't change but the elements inside these divs change. I want the div to zoom out/in as well. That is why I want them to have relative position.
.body_clr {
background-color: #eceff1;
position: fixed;
overflow-y: scroll;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.test_div {
width: 20em;
height: 20em;
margin-left: 2em;
margin-top: 20%;
position: relative;
background-color: #f5f5f5;
display: inline-block;
float: left;
z-index: 1;
}
.ff {
width: 40em;
height: 100%;
padding-top: 10%;
position: relative;
background-color: #2aabd2;
float: left;
margin-left: 20%;
margin-right: 20%;
display: inline-block;
}
.overview {
width: 20em;
height: 35%;
background-color: black;
margin-top: 20%;
float: left;
margin-right: 5%;
position: relative;
display: inline-block;
z-index: 1;
}
<div className="body_clr">
<div className="test_div"></div>
<div className="ff"></div>
<div className="overview"></div>
</div>
Right now my divs are not aligned horizontally.

Answer 1

I would use flexbox for this. Take a look at this example I made: https://jsfiddle.net/cfLfLnLx/.
Also use class and not className to specify the classes of HTML elements.
A more extensive guide to using flexbox:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

You have some mistakes in your css:
You can't use display: inline-block with float: left ( you have to use float: left or display: inline-block )
If you use float: left you have to put a clear after the 2 floated divs ( always ) .
My solve with table-cell
* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.body_clr { width: 100%; height: 100%; display: table; }
.col1 { height: 100%; display: table-cell; padding: 0 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.ff { width: 100%; height: 40px; display: block; background: #000;}
.test_div { width: 100%; height: 40px; display: block; background: red;}
.overview { width: 100%; height: 40px; display: block; background: blue;}
<div class="body_clr">
<div class=" col1">
<div class="test_div"></div>
</div>
<div class="col1">
<div class="ff"></div>
</div>
<div class="col1">
<div class="overview"></div>
</div>
</div>
With float:
.body_clr { width: 100%; height: 100%; display: block; }
.clear { width: 0; height: 0; padding: 0; margin: 0; display: block; visibility: hidden; overflow: hidden; font-size: 0; line-height: 0; clear: both; }
.col1 { width: 33.33%; height: 100%; display: block; float: left; padding: 0 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.ff { width: 100%; height: 40px; display: block; background: #000;}
.test_div { width: 100%; height: 40px; display: block; background: red;}
.overview { width: 100%; height: 40px; display: block; background: blue;}
<div class="body_clr">
<div class=" col1">
<div class="test_div"></div>
</div>
<div class="col1">
<div class="ff"></div>
</div>
<div class="col1">
<div class="overview"></div>
</div>
<div class="clear"></div>
</div>