Arranging 3 div's in a container and one with auto height - html

Question

I am trying to arrange 3 divs side by using float:left, there is fixed height for two div's child1 and child3, but there is no height for child2, i need the child2 div height as the same height of the container div.
<div id="container">
<div id="child1">Child1</div>
<div id="child2">Child2</div>
<div id="child3">Child3</div>
<div>
#container
{
margin-left: 3px;
padding: 10px 0px;
position: relative;
display: block;
width: 500px;
background:yellow;
overflow:hidden;
}
#child1
{
float:left;
width:100px;
height:300px;
background:green;
}
#child2
{
float:left;
width:100px;
height:auto;
background:cyan;
}
#child3
{
float:left;
width:100px;
height:400px;
background:red;
}
here is the fiddle: http://jsfiddle.net/2ksxL/2/

Answer 1

You can change the #container {display: flex;}, but that does not have awesome support in IE (http://caniuse.com/flexbox). If you need more support you will have to come up with a jQuery solution that can find the height of the container and give it to #child2.

Answer 2

Since you haven't define any height for container, the container height is going to depend on the max height that's been defined to the #childX. In this case, #child3. So what you can do is compare the height of both #chidl1 and #child3 and set the height of #child2 to the max one via this little jQuery.
var highestCol = Math.max($('#child1').height(),$('#child3').height());
$('#child2').height(highestCol);
FIDDLE