title: Invalid HTML Unclosed Element
body: <p>I am getting the following validation errors:</p>
  
  <pre><code>Line 63, Column 7: End tag for body seen but there were unclosed elements.
  &lt;/body&gt;
  
  Line 19, Column 25: Unclosed element section.&lt;section id="content"
  </code></pre>
  
  <p>I am using a HTML5 validator and I suspect this error is why my sidebar is not aligning.</p>
  
  <p>CSS:</p>
  
  <pre><code>html{
      height:100%;
  }
  body{
      width:960px;
      height:100%;
      margin:0 auto;
  }
  p,h1,h2{
      margin:25px;
  }
  header{
      width:100%;
      border-bottom:1px solid green;
  }
  header #logo{
      height:90px;
      width:150px;
      border:1px solid red;
  }
  
  header nav{
      width:100%;
      height:45px;
      border:1px solid red;
  }
  header nav ul{
      float:left;
  }
  header nav ul li{
      display:inline;
  }
  header nav li a{
      float:left;
      text-decoration: none;
      margin-left:15px;
  }
  
  #content{
      float:left;
      width:705px;
      height:100%;
      border:1px solid red;
  }
  #showcase{
      position: relative;
      width:705px;
      padding:20px 0px 20px 20px;
  }
  #showcase ul{
      float:left;
      display:block;
      margin-left:-20px;
      margin-bottom:20px;
      width:200px;
      border:1px solid green;
      list-style:none;
  }
  #showcase ul li h3{
      margin: 0 0 0 -15px;
      letter-spacing: -0.25px;
      margin: 4px 0px 3px 0px;
      text-indent: 3px;
  }
  
  #showcase ul li h3 a {
      color: #010101;
      text-decoration: none;
  }
  #showcase ul li h3 a:hover {
      color: #4fbcd8;
  }
  
  #showcase ul p {
      height:70px;
      margin:0 0 0 -15px;
      line-height: 1.6em;
      padding-left: 3px;
  }
  #showcase ul img{
  width:175px;
  height:137px;
  background-color:pink;
  }
  #sidebar{
      float:right;
      height:100%;
      width:225px;
      border:1px solid red;   
  }
  #box_one, #box_two, #box_three{
      height:100px;
      border-bottom:1px solid #ccc;
  }
  footer{
      clear:both;
      height:24px;
      border:1px solid red;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Template 2011&lt;/title&gt;
      &lt;link rel="stylesheet" href="_assets/css/style.css"&gt;
  &lt;/head&gt;
      &lt;body&gt;
          &lt;header&gt;
              &lt;div id="logo"&gt;Template Here&lt;/div&gt;
                  &lt;nav&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Page One&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Page Two&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Page Three&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Page Four&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                  &lt;/nav&gt;
          &lt;/header&gt;
              &lt;section id="content"&gt;
                  &lt;h1&gt;Main Content Section&lt;/h1&gt;
                      &lt;p&gt;Content&lt;/p&gt;
                          &lt;section id="showcase"&gt;
                              &lt;h1&gt;My Work&lt;/h1&gt;
                                  &lt;ul&gt;&lt;!-- Showcase One --&gt;
                                      &lt;li&gt;
                                          &lt;a href="#"&gt;&lt;img src="#" alt="#" /&gt;&lt;/a&gt;
                                          &lt;br/&gt;
                                          &lt;h3&gt;&lt;a href="#"&gt;Photography&lt;/a&gt;&lt;/h3&gt;
                                          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem massa, auctor ac tempor at, congue quis erat. Fusce at adipiscing magna. Duis iaculis quam vel ante aliquam eget faucibus nisi pretium. Aenean varius tempus vulputate. Cras ipsum nisi, vehicula id aliquam a, blandit iaculis felis. Sed viverra diam purus. Nam tempor, risus feugiat auctor tristique, arcu massa gravida diam, scelerisque luctus dolor magna eget sapien.&lt;/p&gt;
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
                                  &lt;ul&gt;&lt;!-- Showcase Two --&gt;
                                      &lt;li&gt;
                                          &lt;a href="#"&gt;&lt;img src="#" alt="#" /&gt;&lt;/a&gt;
                                          &lt;br/&gt;
                                          &lt;h3&gt;&lt;a href="#"&gt;Photography&lt;/a&gt;&lt;/h3&gt;
                                          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem massa, auctor ac tempor at, congue quis erat. Fusce at adipiscing magna. Duis iaculis quam vel ante aliquam eget faucibus nisi pretium. Aenean varius tempus vulputate. Cras ipsum nisi, vehicula id aliquam a, blandit iaculis felis. Sed viverra diam purus. Nam tempor, risus feugiat auctor tristique, arcu massa gravida diam, scelerisque luctus dolor magna eget sapien.&lt;/p&gt;
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
                                  &lt;ul&gt;&lt;!-- Showcase Three --&gt;
                                      &lt;li&gt;
                                          &lt;a href="#"&gt;&lt;img src="#" alt="#" /&gt;&lt;/a&gt;
                                          &lt;br/&gt;
                                          &lt;h3&gt;&lt;a href="#"&gt;Photography&lt;/a&gt;&lt;/h3&gt;
                                          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem massa, auctor ac tempor at, congue quis erat. Fusce at adipiscing magna. Duis iaculis quam vel ante aliquam eget faucibus nisi pretium. Aenean varius tempus vulputate. Cras ipsum nisi, vehicula id aliquam a, blandit iaculis felis. Sed viverra diam purus. Nam tempor, risus feugiat auctor tristique, arcu massa gravida diam, scelerisque luctus dolor magna eget sapien.&lt;/p&gt;
                                      &lt;/li&gt;
                                  &lt;/ul&gt;           
              &lt;/section&gt;
                  &lt;section id="sidebar"&gt;
                      &lt;div id="box_one"&gt;
                          &lt;p&gt;Box One&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div id="box_two"&gt;
                          &lt;p&gt;Box Two&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div id="box_three"&gt;
                          &lt;p&gt;Box Three&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/section&gt;
              &lt;footer&gt;
                  &lt;p&gt;This is the footer&lt;/p&gt;
              &lt;/footer&gt;
  &lt;/body&gt;
  </code></pre>