Generally speaking you are asking for something that CSS layouts were never really originally intended to do. Until very recently making columns and having them all reach an equal height was impossible without certain... tricks. There are five main ways of doing it.
The first trick is called "faux columns" -- you fake the appearance by using either a wrapping element with a background-image on it (only useful for fixed width layouts), or by absolute positioning dummy DIV (or generated content if you don't care about IE7/earlier) "bottom" with a massive height (like 999em) underneath the columns; this fakes the APPEARANCE of those columns stretching even though they really don't. This is the technique I'd probably advocate just because it can be made compatible all the way back to IE 5.x if need be, without resorting to non-semantic markup.
The second trick is "tables for layout" -- tables can do that. Problem is that's non-semantic markup and abuse of the table tag for something it was never meant for, and tables can introduce their own issues across different browsers.
The third method is "display:table" and "display:table-cell" -- since table-cells do this you can use that display state to pull it off; unfortunately both are relatively recent concepts and browser support is iffy/nonexistent if you care about legacy IE. (pretty much 7 and earlier)
The final major technique for doing this is the new kid, "display:flex" -- the flex-box model is completely capable of what you ask, but has it's own set of ... issues, not the least of which being that it only works in bleeding edge browsers and IE 10+. Even IE9 can't do this one as it's just too new, and it can also be hard to manage/control and is still kind-of inconsistent across browsers. Still, I suggest learning this one now even if you're not going to use it yet, because it is VERY powerful and is the future of CSS layouts.
Some other observations about your code:
There is no reason to put a TITLE on a stylesheet LINK... and where are your MEDIA attributes?
Your logo probably doesn't belong in the markup as a IMG tag. You've got a perfectly good structural H1, but it doesn't gracefully degrade images off defeating the entire reason to have it there. You may want to look into "gilder-levin image replacement" as that's what should probably be done there.
Not every element needs a DIV around it. If you already have a DIV parent for example, there is NO reason to wrap that extra DIV around the IMG, or the H1. You aren't doing ANYTHING there that couldn't have been applied to those tags directly.
Be careful on comment placements -- comments (yes, I said comments) between sibling level elements can trip two giant rendering bugs in certain versions of IE and FF -- the so called "double render" and "dissapearing content" bugs. This can be avoided two ways:
1) by not wasting time on pointlessly obvious opening comments:
<div id="footer"><!-- begin footer -->
No, really, a DIV with the ID of 'footer' is the beginning of the footer? Whoddathunkit?!?
2) placing closing comments inside the close instead of after, so instead of:
</div><!-- end footer -->
<!-- #footer --></div>
Note, you don't need to say "end" either, </div> says "end".
Moving the closing comment and not wasting time on pointless openings makes it impossible for the comment to end up between sibling-level elements, making any positioning bugs induced by comments impossible.
I'm gonna do you a bit of a favor, and do a rewrite of your page how I'd go about it -- then document it so you can learn from it -- including implementing that faux-column technique I mentioned.