javascript - Getting actual height of an auto-heighted element in IE

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

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.