jQuery css height not applying <p>For some reason the height is not being set in this piece of code</p> <pre><code>jQuery(document).ready(function() { jQuery('#main-content').css({'height': ((jQuery(window).height()))+'px'}) jQuery('#nav-icons a').click(function(){ jQuery('#nav-icons a').removeClass("active-icon"); jQuery(this).addClass( "active-icon" ); var toLoad = jQuery(this).attr('href')+' #main-content'; var toLoadSlider = jQuery(this).attr('href')+' #homepage-slider'; jQuery('#main-content , #homepage-slider').fadeOut(1000, loadContent); function loadContent() { jQuery('#homepage-slider').empty().load(toLoadSlider) jQuery('#main-content').empty().load(toLoad,'',showNewContent()) } function showNewContent() { jQuery('#main-content , #homepage-slider').css({'height': ((jQuery(window).height()))+'px'}).hide().fadeIn(2000).removeAttr('id class'); } return false; </code></pre> <p>interestingly, the exact same line of code in the showNewContent() does set the height.</p>