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://www.campusmomlaundry.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

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.)