Getting actual height of an auto-heighted element

Question

I'm pretty confused! with this:

...
<div id="main">         
    <div id="content">
        <div class="col1">
        ...COLUMN1 CONTENT GOES HERE...
        </div>

        <div class="col2">
        ...COLUMN2 CONTENT GOES HERE...
        </div>
    </div><!-- #content -->
</div><!-- #main -->
...

there are columns as you see, and I want to set their container element's height to the maximum size of both columns(plus 130px). so by using Prototype framework:

//fixing column height problem
Event.observe(window,"load",function(){             
    if(parseInt($('col1').getStyle('height')) > parseInt($('col2').getStyle('height')))
        $('main').setStyle({'height' : parseInt($('col1').getStyle('height'))+130+'px'});
    else
        $('main').setStyle({'height' : parseInt($('col2').getStyle('height'))+130+'px'});
});//observe

It working nice in Firefox, Opera, Safari & Chrome but it fails to return the actual height of columns. in IE7+ (not tested in IE6) it returns NaN as columns height.
I've managed to find out that's because of this:

.col1,.col2{"height:auto;"}

I've also used "$('col1').offsetHeight" and it's returning 0 as the height value of each column.

the HTML is styled in this way:

#main{
height: 455px;
background: #484848 url(../images/mainbg.png) repeat-x;
}
#content{
/*height:80%;*/
width: 960px;
direction: rtl;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.col1,.col2{
width: 33%;
text-align: right;
margin-left:3px;
padding-right:3px;
line-height:17px;
}
.col1{padding-top:20px;}
.col1 ul{
margin:0;
padding:0;
list-style: url(../images/listBullet.gif);
}
.col1 ul li{
margin-bottom:20px;
}
.col2{
top: 0;
right: 70%;
position: absolute;
}

any idea on the issue please?!

update/ It tooks three days to solve, and I was at the very risk of making a bounty!
for the solution please take a look at this question/answer.

Answer 1

I know this is an old question but I found a better answer than "Fix the css and forget the javascript".

I had the exast same problem and used .innerHeight() and it forced jQuery to calculate the height. For some reason .outerHeight() did not work whilst .innerHeight() solved the problem. Not sure if there is a similar method for prototype. You could look into the jQuery library and figure out how .innerHeight() works, and write your own.

Answer 2

As a completion for Marc's answer; There's an equal for jQuery's height() in Prototype:

$('col1').getDimensions().height //or .width ofcourse

And here's the docs: http://prototypejs.org/api/element/getDimensions

Update: I agree with crescentfresh below. Since I had the absolute same problem in the past, I've searched all possible methods to find the dimension properties but I failed as you will. please take a look at this:

function getStyle(oElm, strCssRule){
    var strValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle){
        strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
    }
    else if(oElm.currentStyle){
        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
            return p1.toUpperCase();
        });
        strValue = oElm.currentStyle[strCssRule];
    }
    return strValue;
}

As you see, the function has been written to get the computed rendered current style of an element, but in our case even this method will fail, I guess. (worth a try)

So, as crescentfresh said, you have to find the problem in your CSS positioning method while not wasting your time seeking for a proper javascript function which could be able to do the magic. let's begin by removing that #content DIV and letting the #main to be the only wrapper of said columns, and then styling the remain to achieve the desired goal.

Answer 3

I don't know if it will work (without testing), but you could try jQuery and height(); this (in theory) gives the computed height. Worth a try...

Answer 4

Since IE wants to give you a hard time, you can give it some special attention and use a property that I believe it will recognize...

var height;
if(document.all) { //This means it is IE
  height = document.getElementById('col1').offsetHeight;
}
else {
  height = //Use what is working in other browsers now
}

Answer 5

From: Why would jquery return 0 for an offsetHeight when firebug says it's 34?

An element that is not actually taking part in the document render process has no dimensions, and will give an offsetWidth/Height of 0.

Both Prototype's getDimensions() and jQuery's height() read the offsetHeight or clientHeight properties, which you've tried and got 0. So somewhere in your code there must be something taking #col out of the rendering flow. That's all I can think of.

Answer 6

Artarad,
The above style i.e. css shows that you have not assigned height. Please try adding _height:auto in class which will look like

    .col1,.col2{
width: 33%;
_height:auto;
height:auto;
text-align: right;
margin-left:3px;
padding-right:3px;
line-height:17px;
}

Basically, many browsers fail to recognize the height when assigned to a particular div or any element . In this case we use the above work arounds. I hope the above helps you.

Thanks,
Samiksha