JQuery div.height is wrong in Chrome to make all the divs same height

Question

I have used the following code to have equal height for rightpos, leftpos and middlepos divs:

<script>

    jQuery.noConflict();
    jQuery(document).ready(function($){

        // Find the greatest height:
        maxHeight = Math.max($('#rightpos').height(), $('#middlepos').height());
        maxHeight = Math.max(maxHeight, $('#leftpos').height());

        // Set height:
        $('#rightpos').height(maxHeight);
        $('#middlepos').height(maxHeight);
        $('#leftpos').height(maxHeight);

    })
</script>

Determining of the tallest div using this way for the main page of http://yaskawa.ir/ works well in Firefox, but has problems in Chrome.

---

UPDATE 1 after Sparky672's answer:

I can see that with this code,the alert('test here'); at the end doesn't work.

<script>
    jQuery.noConflict();
    //jQuery(document).ready(function($){});

    jQuery(window).load(function($){

        // Find the greatest height:
        maxHeight = Math.max($('#rightpos').height(), $('#middlepos').height());
        maxHeight = Math.max(maxHeight, $('#leftpos').height());

        // Set height:
        $('#rightpos').height(maxHeight);
        $('#middlepos').height(maxHeight);
        $('#leftpos').height(maxHeight);

        alert('test here');
    })
</script>

Answer 1

Try window.load() in place of document.ready() to ensure that all assets are loaded before your heights are calculated.

jQuery(window).load(function($){

Documentation:

The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.

http://api.jquery.com/load-event/

See DEMO:

http://jsfiddle.net/snBLP/3/