Make Two Floated CSS Elements the Same Height

Question

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

Answer 1

Why don't you use a table?

This is getting ridiculous. User wants to see a table. HTML language provides a table element to achieve exactly the goal user wants. Yet, we use a whole library (I an looking at JQuery answer) to achieve the goal w/o a table even though it means a script running on client!

Answer 2

I think that tables should be used for what they were created for - and that is storing data, not showing layout.

If You want good, cross-browser & hack-free CSS solution - check this article.