div height using css(ie6 obviously)

Question

I hate fiddly css and formatting, everytime I think I have cracked it, another problem comes up and I just ended up trying things out until it works - like a noob. Oh well.

I have three 3 divs, one container, and two inner divs. One of the inner divs has text that can vary in height, the other is just checkbox, but for stylign reasons I want to have the same height as other inner div. Setting height 100% (of "filler") just fills page.

<div class="container">

  <div class="heightSetter"> contains wrapped text, and varies in height </div>

  <div> class="filler"> other stuff, that I want as same height as height setter </div>

</div>

Maybe a table would be better, but for now any help/answers/advice on this specific problem gratefully received.

Cheers!

Edit Just found this from a previous question/answer, using jQuery and on document ready. Just tested it, work likes a dream.

$(".filler").height($(".heightSetter").height());

Edit 2 jQuery absolutely rocks, must have saved me so much dev time on this and other problems.

Answer 1

Two solutions for this problem that work in IE6:

Faux Columns - Only works if the background of the column that has to stretch (right, in this case) has only one background color or a repeating pattern (because it uses an image or border to fake a column).

Equal Height Columns - CSS trick that I haven't yet tested.

Answer 2

This is very difficult to achieve with CSS that IE6 can understand. However, you can fake it using the faux columns technique. Basically, you set a background image on the container column which makes it look like the two children (heightsetter and filler) are of equal height. Not ideal, but it usually does the job.

Answer 3

$(".filler").height($(".heightSetter").height());