Sorting out gap between div and footer
===

I have a few questions regarding my DIV layout.

I can't seem to understand why my layout (which can be found [here][1]) has a massive gap between the divs and the footer. How can I get it to line up right underneath the footer? 

Secondly it seems that the method used to make **box 2,3,4** all correlate height-wise (they seem to be a bit skew at the bottom). How do I accomplish this? Right now I'm just doing a bit of guess work with the height percentages.

Thanks in advance.

  [1]: http://jsfiddle.net/methuselah/V44Jw/1/