473,727 Members | 1,985 Online

# Setting the height of two elements to match each other

Hi all,

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 = (second.offsetH eight > first.offsetHei ght) ?
second.offsetHe ight :
first.offsetHei ght;

first.style.hei ght = newheight + "px";
second.style.he ight = 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
Sep 26 '05 #1
12 2547
Andy Jeffries wrote:

Hi all,

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 = (second.offsetH eight > first.offsetHei ght) ?
second.offsetHe ight :
first.offsetHei ght;
Mick

first.style.hei ght = newheight + "px";
second.style.he ight = 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

Sep 26 '05 #2
Mick White wrote:
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 = (second.offsetH eight > first.offsetHei ght) ?
second.offsetHe ight :
first.offsetHei ght;

OK, I get:

123
153
153

If I put the same alerts in after:

first.style.hei ght = newheight + "px";
second.style.he ight = newheight + "px";

I get:

162
162
153

So, that's my problem. They are now equal in height but as my query
said it makes both of them larger than either was before.

Cheers,
Andy
Sep 26 '05 #3
Andy Jeffries wrote:

Hi all,

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)

Asking this in a CSS forum, I'm sure they'll have a way to do this (or
at least make it look like it's happening) without any scripting.

Try:

comp.infosystem s.www.authoring.stylesheets
--
Rob
Sep 26 '05 #4

Andy Jeffries wrote:

So, that's my problem. They are now equal in height but as my query
said it makes both of them larger than either was before.

The CSS height is not necessarily the same as the offsetHeight, the CSS
height defines the height of the content box and offsetHeight includes

Thus if you have
height: 200px
border-width: 1px
then you could have offsetHeight as
200 + 2 * 2 + 2 * 1 = 206
and if you then set
height: 206px
and don't change the padding and border then you get offsetHeight as
206 + 2 * 2 + 2 * 1 = 212
for instance.

--

Martin Honnen
http://JavaScript.FAQTs.com/
Sep 26 '05 #5
Martin Honnen wrote:
So, that's my problem. They are now equal in height but as my query
said it makes both of them larger than either was before.

The CSS height is not necessarily the same as the offsetHeight, the CSS
height defines the height of the content box and offsetHeight includes

Thus if you have
height: 200px
border-width: 1px
then you could have offsetHeight as
200 + 2 * 2 + 2 * 1 = 206
and if you then set
height: 206px
and don't change the padding and border then you get offsetHeight as
206 + 2 * 2 + 2 * 1 = 212
for instance.

OK.

I've looked at the Javascript object using the DOM in Mozilla and
apparently there's no padding or border on the object (which sounds
right) but the assigned height still differs by 9px.

I can fudge this, but I'd really rather understand what's going on.

Cheers,
Andy
Sep 26 '05 #6
Andy Jeffries wrote:
Martin Honnen wrote:
So, that's my problem. They are now equal in height but as my query
said it makes both of them larger than either was before.

The CSS height is not necessarily the same as the offsetHeight, the
CSS height defines the height of the content box and offsetHeight
includes any padding or border space.

Thus if you have
height: 200px
border-width: 1px
then you could have offsetHeight as
200 + 2 * 2 + 2 * 1 = 206
and if you then set
height: 206px
and don't change the padding and border then you get offsetHeight as
206 + 2 * 2 + 2 * 1 = 212
for instance.

OK.

I've looked at the Javascript object using the DOM in Mozilla and
apparently there's no padding or border on the object (which sounds
right) but the assigned height still differs by 9px.

I can fudge this, but I'd really rather understand what's going on.

And the best bit is, that it doesn't work for one set (expands them by
9px) but my original code does work perfectly for another.

The code I put in is (to see if it worked before doing the same for
border*):

if (first.style.pa ddingTop) {
newheight = newheight - parseInt(first. style.paddingTo p);
}
if (first.style.pa ddingBottom) {
newheight = newheight - parseInt(first. style.paddingBo ttom);
}

Cheers,
Andy
Sep 26 '05 #7

Andy Jeffries wrote:
I've looked at the Javascript object using the DOM in Mozilla and
apparently there's no padding or border on the object (which sounds
right) but the assigned height still differs by 9px.

Make a minimal test case with valid HTML and CSS and post a URL. If
there is any script to be applied please make a button that calls the
script so that we can look at the static document first in DOM inspector
for instance and then see the result of your script when the button is
clicked.

--

Martin Honnen
http://JavaScript.FAQTs.com/
Sep 26 '05 #8
Martin Honnen wrote:

Andy Jeffries wrote:
I've looked at the Javascript object using the DOM in Mozilla and
apparently there's no padding or border on the object (which sounds
right) but the assigned height still differs by 9px.

Make a minimal test case with valid HTML and CSS and post a URL. If
there is any script to be applied please make a button that calls the
script so that we can look at the static document first in DOM inspector
for instance and then see the result of your script when the button is
clicked.

http://www.andyjeffries.co.uk/temp/testcase/

Cheers,
Andy
Sep 26 '05 #9

Andy Jeffries wrote:

Andy Jeffries wrote:
I've looked at the Javascript object using the DOM in Mozilla and
apparently there's no padding or border on the object (which sounds
right) but the assigned height still differs by 9px.
http://www.andyjeffries.co.uk/temp/testcase/

So you are looking at the first inner <div> element in <div
class="first"> respectively <div class="second"> ?

DOM inspector says that line 221 in main.css gives
border-bottom-width: 1px
So that gives you the 9px difference, offsetHeigth is e.g. 128, computed
CSS height is 119px, if you now set the CSS height to 128 the padding
and border is added to the offsetHeight and you get the new offsetHeight
128 + 9 = 137.

That is exactly what I already told you, the CSS padding and/or border
is added to the CSS height/width when offsetWidth/offsetHeigth is computed.

--

Martin Honnen
http://JavaScript.FAQTs.com/
Sep 26 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

### Similar topics

 5 2850 by: MyndPhlyp | last post by: I've been busting my head trying to figure this out for quite some time. With IE6 and NS7, no problems. I can simply code the HTML and be done with it. But NS4 and NS6 (and probably a couple of other IE and NS versions I can't get to right now) don't want to play nice unless I hard code the image height. (Yes, I'm one of those who insists on still coding for NS4.) 12 3225 by: Jacob Weber | last post by: Hello. Is it possible to specify the exact space between two lines, measured from the baseline of the top line to the ascenders of the second line? I tried adding the space with padding-bottom, but it adds it below the descenders. So the actual space between lines is larger than I specified. Jacob 7 3284 by: nntp | last post by: I am making two tables side by side. I need talble's each elements to match table two's. So the
in both must have the same heights. However. one talble's content's length is unknown under dynamic content is made. I tried to use but it does not force the height, but only set the minimal height. I want to know if there is a way to limit the height. or even the length of the content, so if it has 1000 charater long,... 9 2563 by: netclectic | last post by: I'm dynamically adding options to a select list in javascript and i need to be able to set the height of the option, but setting style.height has not effect, I also tried style.pixelHeight but no joy. i'm doing something like this (: var selectControl = document.getElementById('MySelect'); var el = document.createElement('option'); el.value = "some value"; 21 3984 by: Michael Bierman | last post by: Please forgive the simplicy of this question. I have the following code which attempts to determine the color of some text and set other text to match that color. It works fine in Firefox, but does nothing in IE. I'd be greatful for any assistance. Also, if I will have problems the code on Opera or Safari, I'd appreciate any pointers--I don't have a Mac to test Safari. THanks very much, Michael 22 6966 by: Les Juby | last post by: I am trying to adjust the window/table size of a website (www.worklaw.co.za) which has made use of DIV tags with its settings embedded in an CSS file. The client wants its width and height to adjust according to dynamic screen size, and I have been able to adjust the width to a percentage value which works fine. But if I try do the same with the height it shows some very strange results squashing the field to display about 3 lines. 1 1707 by: Roland Dick | last post by: Hello, I have a problem here with an ASP.NET website. The pages are supposed to use a single master page which just contains some images and a menu control on the top, below that is the content placeholder. What I would like to achieve is to always see the master page elements (the images and the menu control). In other words, the content placeholder should display a scrollbar, not the whole page. 0 2226 by: erdavila | last post by: With a code like this:
Cell A