title: HTML/CSS: What is preventing the body from covering the whole page?
body: <p>This is a homework assignment. My initial goal is to get a side bar on the right. I have the body, then a container div called "wrap" to hold the entire contents of the body. If I create another div for the side bar at the end of this "wrap" container div, the sidebar should be placed on the outside and I should be able to float it to the right. This isn't happening for me and I can't figure out why.</p>
  
  <p>Edit: Relevant code</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en-us"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Sartre’s List&lt;/title&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Lato:300,700,300italic,700italic' rel='stylesheet' type='text/css'&gt;
      &lt;link rel="stylesheet" href="css/main.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="wrap"&gt;
      &lt;div class="top"&gt;
      &lt;header&gt;
              &lt;h1&gt;&lt;a href="index.html"&gt;Sartre’s List&lt;/a&gt;&lt;/h1&gt;
              &lt;h2&gt;Better-Dressed People&lt;/h2&gt;
              &lt;nav&gt;
                      &lt;a href="#"&gt;Women’s&lt;/a&gt;
                      &lt;a href="#"&gt;Men’s&lt;/a&gt;
                      &lt;a href="#"&gt;On the Street&lt;/a&gt;
                      &lt;a href="#"&gt;The Catwalk&lt;/a&gt;
                      &lt;a href="#"&gt;AdWatch&lt;/a&gt;
                      &lt;a href="#"&gt;About&lt;/a&gt;
              &lt;/nav&gt;
      &lt;/header&gt;
  &lt;/div&gt;
      &lt;div class="item"&gt;
      &lt;article&gt;
              &lt;h3&gt;11/12/13&lt;/h3&gt;
              &lt;h2&gt;&lt;a href="#"&gt;On the Street in Brooklyn&lt;/a&gt;&lt;/h2&gt;
              &lt;img src="img/fashion_photo.jpeg"&gt;
              &lt;p&gt; article content&lt;/a&gt;&lt;/h4&gt;
      &lt;/article&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
      &lt;article&gt;
              &lt;h3&gt;11/11/13&lt;/h3&gt;
              &lt;h2&gt;&lt;a href="#"&gt;Vintage in Vogue&lt;/a&gt;&lt;/h2&gt;
              &lt;img src="img/fashion_photo2.jpeg"&gt;
              &lt;p&gt; Article Content&lt;/p&gt;
              &lt;h4&gt;&lt;a href="#"&gt;Continues...&lt;/a&gt;&lt;/h4&gt;
      &lt;/article&gt;
  &lt;/div&gt;
      &lt;footer&gt;
              &lt;nav&gt;
                      &lt;a href="index.html"&gt;Home&lt;/a&gt;
                      |
                      &lt;a href="#"&gt;Women’s&lt;/a&gt;
                      |
                      &lt;a href="#"&gt;Men’s&lt;/a&gt;
                      |
                      &lt;a href="#"&gt;On the Street&lt;/a&gt;
                      |
                      &lt;a href="#"&gt;The Catwalk&lt;/a&gt;
                      |
                      &lt;a href="#"&gt;AdWatch&lt;/a&gt;
                      |
                      &lt;a href="#"&gt;About&lt;/a&gt;
                      |
                      &lt;a href="#"&gt;Tips&lt;/a&gt;
              &lt;/nav&gt;
              &lt;p&gt;&amp;copy; 2013 Valet Industries, Inc.&lt;/p&gt;
      &lt;/footer&gt;
  &lt;/div&gt;
  &lt;div id="sidebarWrap"&gt;
  &lt;div class="sidebar"&gt;About us&lt;/div&gt;
  &lt;div class="sidebar"&gt;Ad&lt;/div&gt;
  &lt;div class="sidebar"&gt;Popular Posts&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the CSS:</p>
  
  <pre><code>body {
      margin: 0;
      padding-left: 3em;
      font-family: 'Lato', sans-serif;
      font-size: 18px;
      line-height: 1.5;
      background: #FFF;
      color: #444;
      border-left: 6px solid #DDD;
      float: left;
  
  }
  
  a {
      color: #D00;
      text-decoration: none;
      -webkit-transition: all 300ms;
  }
  a:hover {
      color: #A00;
  }
  
  h1, h2, h3, h4, h5, h6 {
      margin: 0;
      padding: 0;
  }
  
  h1, h2 {
  display: inline;
  }
  h1 {
      font-size: 3em;
      font-weight: normal;
  }
  
  h2 {
      font-size: 2em;
      font-weight: normal;
      color: gray;
      margin: 15px;
      padding: 0;
  }
  h2 a {
      color: inherit;
  }
  h2 a:hover {
      color: #D00;
  }
  
  h3 {
      font-size: 2em;
      font-weight: normal;
      color: #CCC;
      margin: 0;
      padding: 0;
  }
  
  h4 {
      text-align: right;
  }
  
  img {
      display: block;
      margin: 10px 0;
      max-width: 100%;
  }
  
  
  header h2 {
      font-size: 1.5em;
      margin-bottom: .5em;
  }
  
  footer {
      color: #BBB;
   }
  
   header nav a {
      display: inline-block;
      font-size: 1.25em;
      margin: 0;
      color: #DDD;
      border-bottom: 2px solid #EEE;
      background: black;
      padding: 10px;
      height: ;
   }  
    header nav a:hover {
      color: gray;
      border-bottom-color: #BBB;
  }
  
  article {
      border-bottom: 1px solid #DDD;
      margin: 3em 0;
      padding-bottom: 1.5em;
  }
  article p:first-letter {
      float: left;
      font-size: 6em;
      line-height: 1;
      color: #DDD;
      margin: -.1em .1em 0 -.1em;
  }
  
  
  #wrap {
      width: 750;
      margin: 0 auto;
      padding: 0;
      max-width: 40em;
  }
  
  #sidebarWrap {
      float: right;
      height: 100%;
  }
  
  .top {
      float: top;
  }
  .item {
      float: left;
  }
  .sidebar {
      float: right;
  </code></pre>
  
  <p>When I look at this in Chrome, the body shows that it is not covering the entire page. The margin is set to 0 and there is only padding/border on the left side. If anyone can help me figure out why the body is not covering the whole page I would appreciate it very much. Thanks in advanced!</p>