Making two elements equal height (one of them floating)

[Andy Jeffries]

Hi all,

I want to have two elements have an equal height, with that height being
the larger of the two (with dynamic content). In one case they are just
side by side so I want them to look even and in another case I want a
border between them.

I originally tried to fudge this using Javascript (see my message below
which was posted in comp.lang.javascript) but the guys there suggested
there may be an easier way in pure CSS.

Can anyone give me a pointer in the right direction?

Cheers,
Andy


------------------------------------------------------------

I want to write a function that given two elements will make their
heights equal to the larger element. I've had a go at it and it works,
but it makes both their heights larger than either of them (but equal)

The code is as follows:

var newheight = Math.max(second.offsetHeight, first.offsetHeight);
first.style.height = newheight + "px";
second.style.height = newheight + "px";

So, I'm obviously doing something stupid, but can anyone enlighten me? I
tried writing to offsetHeight but the changes seemed to be ignored.

Cheers,
Andy

[Spartanicus]

Andy Jeffries <ne**@andyjeffries.co.uk> wrote:

I want to have two elements have an equal height, with that height being
the larger of the two (with dynamic content). In one case they are just
side by side so I want them to look even and in another case I want a
border between them.

That doesn't tell us much, what elements, what content, why, got an url?

--
Spartanicus