Expanding List Not Moving Container/footer

I have a website you can find here, when expanding one of the list items, I can't figure out why the the entire height of the page isn't being modified (footer doesn't move with li

Solution 1:

The #inside div has an height property set. If you remove it, you'll get the behaviour you want.

Edit

It seems you're setting the height property via javascript in order to animate the div's height.

In this case, after animation's been completed, you could set the height to auto, so the #inside div will respect its children's height and expand correctly.

$pageWrap.animate({
    height: baseHeight + $mainContent.height() + "px"
}, {
    complete: function(){
        $(this).css('height', 'auto');
    }
});

Solution 2:

One of your divs has a manual style on it:

<div id="inside" style="height: 367px;">

Remove / disable that and your page container resizes accordingly :)