I am struggling with making 3 floating <div>s all the same length within a wrapper. The issue is that they need to be responsive and cannot have fixed heights.
While researching on stackoverflow, I came across a post addressing this problem: Make floating divs the same height
Despite trying the solution proposed in the post, I couldn't get it to work properly. I even created a fiddle where the middle column has the most text, so ideally, the other two should match its height.
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
}
#iconWrapper {
display: table;
margin-top: 50px;
height: 500px;
}
.icon {
float: left;
width: 33.3%;
text-align: center;
}
.explanation {
text-align: left;
width: 90%;
min-height: 200px;
margin: 0 auto;
margin-top: 40px;
border-radius: 10px;
padding: 20px;
margin: 20px;
}
.boxOrange {
border: 2px solid RGBa(213, 99, 42, .4);
}
.boxBeige {
border: 2px solid RGBa(211, 200, 175, .4);
}
.boxGreen {
border: 2px solid RGBa(137, 176, 185, .4);
}
JS FIDDLE: http://jsfiddle.net/Qv8ak/