Column height() problems in Safari and Chrome

Column height() problems in Safari and Chrome

Hi -

Trying to compare the height of 2 elements, if col2 > col1 then set height of col1 equal to col2.

Here's the code:

  1. function adjustColHeight(col1, col2)
  2.   {
  3.     if (col1.height() < col2.height())
  4.     {
  5.        col1.height(col2.height());
  6.     }
  7.    }
  8.  
  9. $(document).ready(function()
  10. {
  11.   $('.hiddendiv').hide();  //After document loads, hide all divs that are suppose to be hidden
  12.   adjustColHeight($('#leftsidebar'), $('#maincontent'));
  13.  }
Although Safari and Chrome does extend col1, they never completely extend col1 to be the same height as col2.  This occurs when I hit the browser reload button.  However, if I click the menu item for the page, which is in col1 (leftsidebar), col1 extends the rest of the way.  I've attached a file to this post and you can see the issue.

Another minor problem that I have observed, and this is true for all major browsers, is that height() returns one value, but when I set the element using that value (i.e. - $(#id).height(value)), it seems to add additional pixels to the resulting page.  I observe the problem when I use alert() the show the value and compared it to the value given by firebug when I Display Block Size.

Does anyone know what the problem could be or with how I'm using height()?  Thanks for any help.