Set div height with javascript from another div height

Question

I have two divs side by side. Neither of them has a standart height, but the first one has content when the other one fill with content after a form submition. I want to set the height of the second one the same with the first one.

Here is the html:

<div id='left'>
...........
</div>
<div id='right'>
...........
</div>

<script type="text/javascript">
    $(document).ready ( function(){

    var divHeight = document.getElementById('left').style.height;
    document.getElementById('right').style.height = divHeight+'px';
    });​
</script>

I don't have any error on the console, but the height of the second div doesn't change. Any help?

Answer 1

You're looking for the offsetHeight. The height property of your leftmost div is not set (because that's the actual CSS property, and you're not setting the height statically), but the offsetHeight is the actual height of the div as defined by its contents.

var offsetHeight = document.getElementById('left').offsetHeight;
document.getElementById('right').style.height = offsetHeight+'px';

Here's a jsFiddle to demonstrate.

Note that there is also clientHeight. The difference is that offsetHeight also includes padding and borders. See this answer as well.