Yeah — setting a height and overflow for #bodyContainer is not a great idea. For relatively recent browsers, you can set a min-height using vh units (a vh is one percent of the viewport height) that will chase the footer down to the bottom(ish) on pages that don't have enough content. Forget about overflow, just let thee content position itself relatively. If you want the header and/or footer to stick in place, you can use "position: fixed;" on them, then make sure the padding-top of the scrolling/variable area of the page is the same height as the header and the padding-bottom is the same height as the footer. (If you use pixels, ems or points for min-height then your design depends on the users' monitors being more or less the same size as your own, and @
Media queries can only fix so much of that.)
Forget about old browsers (IE6 in particular, IE7 to a lesser extent) unless you really need to support older (non-techy greyhairs) or third world/Chinese users (there's a lot of unpatched Windows XP with IE6 in both groups). If you absolutely do need to support IE versions older than 8, then use conditional comments to bring in a separate stylesheet to fix the problems. Or just make sure the page
works and forget about getting it to look the same as in other browsers. Oh, and as you're using HTML 5, you'll need a shim like Modernizr to make it work in IE < 9 (it "registers" HTML 5 elements in the DOM so they can be styled). That should also be called from conditional comments (so modern browsers don't download JavaScript they don't need).
The doctype declaration is the only thing in the markup that's actually case-sensitive (it's an SGML command, not HTML), and you've got it backwards. Browsers will
probably let you get away with it, but it's not something you should count on (especially with mobile browsers). So make that line:
Again, using HTML 5 changes the game a little, so if you're assembling your knowledge from various articles and tutorials that exist in print and on the web, you'll find that some things are seriously out of date. You're using
div elements on the page to wrap content for styling, for instance, and there's really no good reason to do that anymore. (You're using
<section>, which is good; just keep going with the new elements.) It's something us old fogeys had to do ten years ago to get around the limitations of HTML 4.01 (and the abomination that was XHTML, may it lie uneasy in its unconsecrated grave).
<div id="header"> should simply be
<header>. Your footer should be
<footer>. Your main content should be in a
<main>. You don't need the wrapper div; you can do the same styling on
<body> and anything that needs to be at a level "higher" than the body can be applied to
<html>.
Please don't think I'm ripping your work to shreds — you're a lot closer than a lot of people get these days, and you're coming into this world at a transition point where the rules are changing and a lot of the information available to you hasn't changed yet. It ain't easy to be between generations. I'd spend some time looking at
HTML5 Doctor and
HTML5 Please (and Chris Coyer's
CSS-Tricks for some styling-fu), then try to re-read or reconsider the older stuff in light of the new rules.
