i always have trouble with height 100% i don’t really trust it so don’t often use it. If i hover over your #mid element in firebug it’s much smaller then it should be considering the #content extends right down to the bottom of the page. And because the pillars are taking their height from the #mid section i guess this is why there not going to the bottom.
I think this is happening because of the three child elements inside the #mid element are all floated, have you heard of the clearfix (https://css-tricks.com/snippets/css/clear-fix/) method? applying it to your #mid element might just sort it out.