Jquery works after inspect element is done in chrome

Jquery works after inspect element is done in chrome

Website link:
http://50.87.144.37/~projtest/team/design/Cece/
Jquery:
$(document).ready(function(){
var pgHeight = $(window).height();
//alert(pgHeight);
$('.sitewid').css('min-height',pgHeight-150)
var ltHeight = $('.mainImg').height();
$('.left').css('height',ltHeight);
$('.links').css('height',ltHeight);
var dHeight1 = $('.mainImg').height();
})
$(window).resize(function(){
setTimeout(function(){
var lt1Height = $('.mainImg').height();
//alert(lt1Height);
$('.left').css('height',lt1Height);
$('.right').css('height',lt1Height);
$('.links').css('height',lt1Height);
$('.social').css('top',lt1Height/2.8);
},50);
})
Html:
<div id="container">
<div class="sitewid">
<div id="header">...</div>
<div id="content" class="mainPg">
<img class="mainImg" src="images/bnw.jpg" alt=" ">
<div class="left">...</div>
<div class="right mainRHeight">...</div>
<p class="cls"></p>
</div>
<div id="footer">...</div>
</div>
This is a responsive design. The page works fine in Firefox but when
viewed in Chrome and other webkit browsers, the jquery does not works as
it is supposed to. The class "mainImg" will be a dynamic image. So the
.left and .right are getting its height and that height is assigned to
both the sections. When I inspect element in chrome or double click on
ipad screen, the content gets into the desired position(s) but it is shown
in haphazard manner when the page first loads. What am I doing wrong here?
The script syntax is in head tag. I have learned jQuery myself so I am
sure I am missing something here because I have faced this issue prior to
this project too. :/