The white background and 700px width are applied to the #wrap div, which is itself positioned after the header. It is 100% high and therefore goes below the fold.

The header and footer are a fixed height and therefore #wrap has a negative top margin equal to the header and footer height. This brings the footer into view but makes #wrap start 100px above the top of the viewport.

This is fixed by adding a top border of 100px to #main to soak up the negative space and bring everything back to an even keel.