I need help arranging 3 divs side by side using float:left. The height for two of the div's (child1 and child3) is fixed, but there is no set height for child2 - I would like child2 to have the same height as 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;
}
To see this in action, check out the fiddle here: http://jsfiddle.net/2ksxL/2/