Strange div height error: webkit or jQuery bug?

I have a simple web page application that has two floated content divs side by side..

A little piece of jquery sets the height of these divs by looking at the height of the parent div and doing a simple calculation

This approach works great in Firefox and IE.. and it also works the first time in Safari and Chrome...

But when the page is reloaded in Safari or Chrome.. the right and lefts div's magically increase their height by about 200px for no reason.

Do a hard refresh.. and the div heights go back to normal

Please advise! this is very strange -

<div class="holder1"  > 

&开发者_C百科lt;!--      LEFT HAND BOX     --> 

<div id="left-box" class="half left"> 
<div class="info-box">  
<h2>Left Hand Content</h2>  


 ------------- Left content here----------------------

</div>  
</div> 

<!--      RIGHT HAND BOX     -->

<div id="right-box" class="half right" >
<div class="info-box">  
<h2>Right Hand Content</h2> 

 -------------Right content here----------------------      

</div>      
</div> 

<div class="clearfix"></div>    
</div> 

<!--    END RIGHT and LEFT BOXES    -->

<div>   more content here  </div>

     <script language="javascript"> 
            var new_height =  $('#left-box').closest('.holder1').height() -25;
            $('#right-box').find('.info-box').height(new_height);
        $('#left-box').find('.info-box').height(new_height);

    </script> 

Are you sure the DOM is built when javascript is running ? Try

 <script type="text/javascript">
    $(function() {
        var new_height =  $('#left-box').closest('.holder1').height() -25;
        $('#right-box').find('.info-box').height(new_height);
        $('#left-box').find('.info-box').height(new_height);
    }
</script> 

Try this, it works for me:

 <script type="text/javascript">
    jQuery(function($){
        $('.holder1 > .half').each(function(){
            var height = 0, actual_height;
            var actual_height = $(this).height();
            if(actual_height > height){ height = actual_height; }
            $('.holder1 .info-box').height(height);
        });
    });
</script> 

thanks for all the ideas.. it seemed to help most when I update the jQuery include from 1.4 to 1.5..

here's a fiddle that works for me in FF, IE, Safari and Chrome..

http://jsfiddle.net/bytKE/11/

I think I found the solution. I had a similar problem trying to change the height of a DIV (containing floated DIVs) based on the parent DIV height (that had height auto). It was working great with IE, but not with Chrome. In Chrome, the parent DIV didn't even had the proper height, like if Chrome didn't count the floated DIV as part of the parent DIV.

To fix the problem, I had to change the style of the parent DIV in adding "float:left" to make it "float" as well. In your CSS code, it would be:

.holder { border:red dotted 1px; float:left }

See, now we see the red dotted parent DIV: http://jsfiddle.net/bytKE/46/

This jQuery issue of Webkit failing to detect the height of an element after a reload or refresh has been around for some time. These possible solutions are worth trying though:

Method 1

Try using jQuery(window).load instead of jQuery(document).ready, e.g.:

jQuery.noConflict();
jQuery(window).load(function() { // <--

    var myheight = jQuery(".mydiv").height();
    jQuery(".this-div-uses-calculated-height-as-padding").css( "padding-top", myheight ); 

});

Source

Method 2 (supported by over 90%+ of browsers, though not IE8)

If the above approach causes some issues between Webkit and other browsers, consider using this:

document.addEventListener("DOMContentLoaded", function(event) { 
    // your script
});

Source

Method 3 (not an elegant one, but it has the highest chance of working properly on all browsers)

And if even that is not working it, you coùld try a less clean way by detecting the browser first, and then applying the script dependent whether it's webkit or not:

jQuery.noConflict();

isWebkit = /(safari|chrome)/.test(navigator.userAgent.toLowerCase());

if (isWebkit){
    jQuery(window).load(function() { // <--            
         // your script    
    });
}

else{
    jQuery(document).ready(function() { // <--
        // your script
    });
}

Another approach may be to make sure to include any CSS files before the inclusion of the jQuery file.