two divs. height accordingly to each other

[LetItBe]

hi,

situation

i have three divs:

<div id="main">
 <div id="left">...</div>
 <div id="right">...</div>
</div>

the "left" div is simply floated to the left and "right" div - to the right side (as you have understood, "main" is just a container). div "left" has a background (an image) and there is some text on the div "right". because of data amount in the "right" its height is usually shifting.

question

is it possible to make the "left" div to change automatically its height accordingly to the "right" div?

thanks a lot.

[jetboy]

Four options:

1. Use a two column table

2. Add a background image/colour to the 'main' div to give the impression that the two columns are the same height

3. Use display: table; etc. for browsers that support it, and JavaScript hacks for those that don't

4. Use JavaScript for everything

Personally, I'd go for option 1 unless there was a decent semantic reason not to. In that case I'd choose option 4.

[Dabrowski]

I agree with Jetboy. Option 1 is preferable to me because it is the ONLY true way of doing this, although requires slightly more markup.

Option 2 is known as 'faux' columns, which works well but isn't ideal. The name 'faux' suggests a workaround, and I don't like them.

Option 3 not really an option, unless is works in all browsers I'm not interested.

Option 4, I use this surprisingly often. Bring on the people who argue for JS disabled!

[Robin_reala]

Jetboy's narrowed down the options pretty thoroughly :) Personally I'd go for option #2 for paid-for sites, and option #3 (without the Javascript hacks) for personal sites. I find that faux columns (option #2) are pretty foolproof, and more people have images switched on that Javascript.