Document height determined incorrectly – can’t see all the content

I am building a wordpress template, and I use a little Javascript to make the ‘content’ element fill the page from top to bottom. The goal is to cover the background image, so the ‘content’ doesn’t look cut above the edge on larger screens. The code is:

$(document).ready(function() {
    var h = Math.max($(window).height()+50, $("#content").height());
    $("#content").height(h); 
});
$(window).resize(function() {
    var h = Math.max($(window).height()+50, $("#content").height());
    $("#content").height(h); 
});

My layout is: fixed sidebar on the left, then content with auto-width and two floated columns inside. It generally works, however on pages where I have a nivo-slider in one of the columns, the document height is determined incorrectly. When the screen size is small, the other column lands underneath (@media statement) and I can’t scroll the screen to see that column.

See example page here: http://figtreephotodesign.com/kidsandfamilies/about/ – and set your browser window below 860px-wide to see the problem.
On another page: http://figtreephotodesign.com/kidsandfamilies/contact/ – it works (there is no nivo-slider).

Is it the nivo-slider’s css messing up?