In order to display the body's main div height correctly after all content (images) have loaded, I utilized a combination of jQuery and CSS.
//The CSS used is as follows
body {display: none;}
/* Function to calculate div block height */
function recalculateHeight(id, add){
var height = $(id).height();
if (height < 650) height = 650;
if (add)
height = height + add;
$('#left_div').height(height);
$('#center_div').height(height);
$('#right_div').height(height);
}
//Recalculate height when the page is fully loaded
$(document).ready(function(){
$(window).load(function(){
$('body').show();
recalculateHeight("#center_div");
});
});
While this method works well in IE, Firefox, and Safari, there are some issues in Chrome and Opera. In Chrome, the height calculation works but the body does not hide, causing the images to load normally. In Opera, neither functions work as intended, resulting in either the page not showing after content loads or incorrect page calculation.
If you want to see the issue in action, you can visit: [Site where this problem is][1]
[1]: not actual
Thank you for your response. Best regards