title: HTML5 / CSS DIV's not aligning horizontally?
body: <p>I am having trouble getting this too work, for some strange reason the DIV's do align horizontally correctly but the second div ends up under the first one. Any help would be greatly appreciated.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;footer&gt;
      &lt;div class="inner"&gt;
      &lt;section id="footer-copyright" class="clear left"&gt;
      &lt;ul&gt;
      &lt;li&gt;© 2013
      &lt;a href="/"&gt;Company&lt;/a&gt;
      |
      &lt;a href="sitemap.html"&gt;Sitemap&lt;/a&gt;
      |
      &lt;a href="privacy.html"&gt;Privacy Policy&lt;/a&gt;
      &lt;/li&gt;
      &lt;/ul&gt;
      &lt;/section&gt;
      &lt;section class="footer-box clear right"&gt;
      &lt;ul&gt;
      &lt;li&gt;Design by &lt;a href="/" target="new"&gt;Template&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/section&gt;
      &lt;/div&gt;
  &lt;/footer&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>footer .inner {
      padding-top: 50px;
  }
  
  #footer-copyright {
      display: block;
      padding-top: 35px;
      width:50%;
  }
  
  #footer-box {
      display: block;
      padding-top: 35px;
  }
  
  footer ul {
      color: #FFFFFF;
      list-style: none outside none;
      padding: 10px 0;
  }
  
  .inner {
      margin: 0 auto;
      position: relative;
      width: 1000px;
  }
  
  .clear {
      clear: both;
      display: block;
  }
  
  .right, .alignright {
      float: right;
  }
  
  .left {
     float:left;
  }
  </code></pre>
  
  <p>Maybe I just need a fresh set of eyes... :)</p>
  
  <p>You can view a working link <a href="http://www.snoopingmidget.com/australiantourismcollege/" rel="nofollow">here</a></p>