Make Two Floated CSS Elements the Same Height

I have two elements which can vary in heights and both floated next to each other. The problem is that it looks pretty ugly if one box is higher than the other. So I want them to be the same height.

One way I thought might work would be too to wrap them in a container div and hope the taller one resizes it and the smaller one expands to fit the space:

HTML:

<div id="outerBox">
<div class="innerBoxLeft"></div>
<div class="innerBoxRight"><br /><br /><br /></div>
</div>

CSS:

.outerBox
{
width: 100%;
}

.innerBoxLeft
{
float:left;
width: 45%;
height: 100%;
}

.innerBoxRight
{
float:right;
width: 45%;
height: 100%;
}

Doesn’t work. I believe this may be because the outer div doesn’t have a set height and for some reason the smaller box and it’s 100% height has nothing to work on. I cannot give it a set height however because that would defeat the point.

So unless there is a another way, I guess I am asking: How can I set a child element’s height to that of it’s parent?

Thanks

Make Two Floated CSS Elements the Same Height