views:

47

answers:

3

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.

+3  A: 

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.

Litso
A: 

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.

Olly Hodgson
A: 
$(".filler").height($(".heightSetter").height());
NimChimpsky
Try not to rely on jQuery too much, especially for presentation, although for problems like this you'd probably need something like IE8.js anyway.
Yi Jiang