title: Layout Issue - Different In Chrome And Firefox
body: <p>Unable to figure this out. Which style is correct based on the css? Should each 'lorem' line up in it's own row as it is shown in firefox? or split like in chrome? How can I fix it so both browsers look the same?</p>
  
  <p>Here is what I have currently</p>
  
  <pre><code>    &lt;body&gt;
          &lt;header&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/header&gt;
          &lt;section&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/section&gt;
          &lt;article&gt;article Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/article&gt;
          &lt;aside&gt;aside Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/aside&gt;
          &lt;footer&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/footer&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/nKHkg/" rel="nofollow">http://jsfiddle.net/nKHkg/</a></p>
  
  <pre><code>body {
      width: 960px;
      margin: 100px auto;
      text-align: center;
  }
  header {
      margin: 5px;
      padding: 20px;
  }
  section {
      margin: 5px;
      padding: 100px;
  }
  article {
      float: left;
      margin: 5px;
      padding: 20px;
  }
  aside {
      float: right;
      margin: 0 5px;
      padding: 20px;
  }
  footer {
      margin: 5px;
      padding: 5px;
  }
  </code></pre>
  
  <p>The above looks the same with Firefox</p>
  
  <p>In Chrome, the article and aside is divided into two columns and looks uneven.</p>