CSS: How to get two DIVs side by side with automatic height, to the height of their container?

Question

I am designing a website for a client, and I am trying to get two side-by-side DIVs to adjust to 100% of their container. I've got the side-by-side done, but I can't get the right DIV to be the same height as the left one.

You can view the problem here: http://campusmomlaundry.petroules.com/

The "challenges" and "benefits" DIVs should be side-by-side and the same height, without manually specifying the height. How can I do this?

Answer 1

Have you tried:

height: auto;

or

height: 100%

?

Answer 2

There's an article on A List Apart on solving a similar problem, you could probably use that as a reference: Faux Columns.

Answer 3

Perhaps number of bullet points in the left DIV?

Answer 4

Your problem is that the outer div is sizing automatically by the inner content, which is sizing automatically by its content.

You have couple of options:

• Use the background solution mentioned in the @R0MANARMY answer to create the visual ilusion of two equally tall columns.
• Set the height of the two inner divs to be the same exact number (using px or em)
• Set the height of the outer div to an exact number.
• Play with the display attribute and try couple of different values like table-cell and so on. Keep in mind that this one is not going to work in some older browsers. (Not only IE, but some old Firefox and Chrome releases as well)
• Use simple table with one row and two columns.

I realize that the last one is the most controversial of all. Yet it is a possible solution for your problem and there's no reason why you shouldn't at least evaluate.

([groan] please, please, nobody mention the words "semantic HTML"! there's no such thing in our universe.)

Answer 5

If it was me. I would solve this problem via javascript. Using jquery you could do...

$(document).ready(function()
{
if($('#leftColumn').height() > $('#rightColumn').height())
{
    $('#rightColumn').height($('#leftColumn').height());
}
else
{
    $('#leftColumn').height($('#rightColumn').height());
}
});

That should do it. If your like the people I work with, and you don't like using Javascript for CSS problems. Then you are probably flat out of luck. Alot of the time, it is much faster just to use JQuery, then to use the "right way" using css. You could probably spend all day trying to get it to work with different combinations of styles.