Background won't apply when I switched to HTML5 tags

I am creating a very simple site with HTML5. All I want is a white background behind my content and ads with grey margins. When I render my code, the white does not get applied between the end of my sidebar ad column and the footer. I’m sure it is something easy I did wrong. Any suggestions would really be appreciated.


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Home</title>
<style type="text/css">
address, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
	display: block;
	background-color: #FFF;
}
html {
	background-color: #D0D0D0;
}
body {
	width: 835px;
	padding: 0;
	text-align:left;
	position: relative;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 100%;
	background-color: #fff;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	height: auto;
}
section {
	float: right;
	width: 690px;
}
#SideBarAds {
	float: left;
	width: 145px;
	height: 100%;
}
#MainColumnAd {
	float: right;
	width: 690px;
}
footer {
	width: 835px;
	padding-top: 2em;
	float: right;
	text-align: center;
}
nav ul {
	font-family: Arial, Verdana;
	font-size: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 835px;
}
nav ul li {
	display: block;
	position: relative;
	float: left;
}
nav li ul {
	display: none;
}
nav ul li a {
	display: block;
	text-decoration: none;
	color: #ffffff;
	border-top: 1px solid #ffffff;
	margin-left: 1px;
	white-space: nowrap;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 42px;
	padding-left: 43px;
	background-color: #06F;
	font-weight: bold;
}
h1 {
	font-size: 1.5em;
	color: #00F;
}
nav ul li a:hover {
	background-color: #06C;
}
nav li:hover ul {
	display: block;
	position: absolute;
	width: inherit;
}
nav li:hover li {
	float: none;
	font-size: 11px;
}
nav li:hover a {
	background-color: #06C;
}
nav li:hover li a:hover {
	background-color: #09C;
}
h2 {
	font-size: 1.2em;
	color: #00F;
}
</style>
</head>
<body>
<header> <img src="../Images/social_security_home_banner.jpg" width="835" height="194" alt="Reitred Couple">
  <nav>
    <ul id="menu">
      <li><a href="">Home</a></li>
      <li><a href="">Eligibility</a></li>
      <li><a href="">SSI</a>
        <ul>
          <li><a href="">Apply</a></li>
          <li><a href="">Appeal</a></li>
          <li><a href="">Claim</a></li>
          <li><a href="">Ineligible</a></li>
        </ul>
      </li>
      <li><a href="">Medicare</a>
        <ul>
          <li><a href="">Apply</a></li>
          <li><a href="">Part C</a></li>
          <li><a href="">Part D</a></li>
          <li><a href="">Updates</a></li>
        </ul>
      </li>
      <li><a href="">Litigation</a></li>
      <li><a href="">Disability</a></li>
    </ul>
  </nav>
</header>
<section>
  <h1>Social Security</h1>
  <p>Social Security is a government program that provides assistance for  poverty, old age, retirement, disability, unemployment and other social needs.</p>
  <p>The payroll taxes for Social Security benefits are collected under the  authority of the Federal Insurance Contributions Act or commonly called FICA.</p>
  <p>FICA today is used so that the federal government can provide benefits for  old age, survivors, disability and hospital insurance.&nbsp; Both employees and  employers are required to contribute to FICA taxes through regular payroll  deductions.&nbsp;The US government pension program provides benefits to  retirees based on their own and their employers' contributions to the program  while they were working. The amount for FICA deductions from your payroll check  is 4.2% for Social  Security Old-Age, Survivors, and Disability Insurance and 1.45% for Medicare  Insurance up to $106,800 annually.&nbsp;Self-employed workers must contribute 10.4 percent of their  income annually. These  figures have been updated  for the year 2011.</p>
  <p>Requirements for disability and other social services vary and can be  obtained based on your qualifications.</p>
  <p>By waiting to claim Social Security benefits,  retirees can increase their annual income. Some retirees qualify to begin  receiving Social Security benefits at age 62. But, payouts increase by 7 to 8  percent for each year you delay your start date, up to the age 70. If you can  afford to wait until age 70, you could increase your income by $500.00 each  month. 
</section>
<aside id="SideBarAds">Side Bar Ad</aside>
<aside id="MainColumnAd">Banner Ad</aside>
<section>
  <h2>Medicare</h2>
  <p>The Medicare part of Social Security is a government  program that provides medical, hospital and prescription drug assistance for  senior citizens.&nbsp; To qualify for Medicare, you must be 65 years of age or  older, or if you have certain disabilities and are younger than 65, you may  also be eligible. Medicare has four parts that take care of different  issues.* Medicare Part A is the hospital  part of the Insurance, Medicare Part B is the medical insurance, Part C is the  Medicare Advantage Plans or Supplemental Insurance and Part D is the  Prescription Drug Coverage.</p>
</section>
<footer> <a href="">Privacy</a> &nbsp; &nbsp; &nbsp; <a href="">Disclaimer</a> &nbsp; &nbsp; &nbsp; <a href="">Site Map</a> &nbsp; &nbsp; &nbsp; <a href="">Contact Us</a> &nbsp; &nbsp; &nbsp; </footer>
</body>
</html>

Because you have floated elements in the body, it isnt stretching down to the bottom of the page, so the white background isnt covering everything. You can fix this by applying a clearfix to the body tag. This one is taken from HTML5 Boilerplate - A rock-solid default template for HTML5 awesome.

.clearfix:before, .clearfix:after { content: "\\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

Add that to your CSS, and then add the clearfix class to your body tag.

<body class="clearfix">

dan.gibbard you are a life saver. That worked perfectly. You’re officially my favorite person for the day.