chrome does not return the right .height()

Okey dokey, I have a jQuery function that checks the height of 2 divs floating beside and applies a background color to the parent element depending on which is taller, it would work perfectly except Chrome does not return the right height when using the jQuery 开发者_运维问答.height() method. I have already applied a reset stylesheet. If you go to this link: http://miami.sightofnick.com/balanced/ , you will see an example of what I am talking about. There is a debug box in the corner; also try using a dew different browsers, it works in everything except chrome. Basically, how do I fix/work-around this?

use

$(window).load(function(){
  // your code
});

instead of

$(document).ready(function() { 
  // your code
});

this works correctly both in chrome and ff.

This is not a problem with height() in chrome.

Check working example at http://jsfiddle.net/vHLGg/11/

Other things are affecting this behavior. If you have overflow:hidden. That could be the problem.

If i understand you correct, you want both columns to look to be at same height, right? You could then use padding-bottom: 1000px and maring-bottom: -1000px, to make the columns in same size, instead of using javascript.

Example:

<div id="container" style="overflow: hidden">
    <div id="left" style="float:left; padding-bottom: 1000px; margin-bottom: -1000px; background-color: red; width: 100px;">
        Lorem ipsum dolor sit amet<br>
        Lorem ipsum dolor sit amet<br>
        Lorem ipsum dolor sit amet<br>
    </div> 

    <div id="right" style="float:left; padding-bottom: 1000px; margin-bottom: -1000px; background-color: blue; width: 100px;">
        Lorem ipsum dolor sit amet<br>
        Lorem ipsum dolor sit amet<br>
        Lorem ipsum dolor sit amet<br>
        Lorem ipsum dolor sit amet<br>
        Lorem ipsum dolor sit amet<br>
    </div>
</div>