I'm setting up a page which serve as an image gallery of a friend's photographs. The menu system I'm using consists of a DIV to the left of an area which will display the photo. There may additionally be commentary about the photo in the area on the right.

The DIV contains the thumbnails of the images available for display. I would like to make the DIV the same height as the content of the area to the right. Here is an image of what I mean:

The area in red is the thumbnail DIV. The area in blue is the variable content area. This shows the image after a resize (which I'm also handling, as well as the onload), but the same idea applies for fixed browser width and different amounts of content.

The approach I'm using now uses javascript to look at the height on the content area and then set the height of the DIV to match. Here is the getStyle() function I'm using:

function getStyle(el,styleProp)
	var x = document.getElementById(el);
	if (x.currentStyle)
		var y = x.currentStyle[styleProp];
	else if (window.getComputedStyle)
		var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
	return y;

//Thanks go to http://www.quirksmode.org/dom/getstyles.html for providing the script.
While this works fine in Firefox, it doesn't work in IE7, because the content area's height is evaluated as "auto" and not a number. Is there a way around this? I'd like to get at least a float, which I can convert to an int to pass to my DIV's currentStyle.height.


Derek Hauffe