title: display: inline for HTML5 elements
body: <p>I am looking to make a horizontally layed website but I am having issues with the display: inline rule.</p>
  
  <p>It seems to be tailored towards inline navigational unordered lists, completely overwriting the height and width set for the articles (and or the sections) in the CSS.</p>
  
  <p>Here is the html:</p>
  
  <pre><code>&lt;div id="container"&gt;
     &lt;section id="about" class="first"&gt;
      &lt;article&gt;
       About Us
      &lt;/article&gt;
     &lt;/section&gt;&lt;!--about--&gt;
  
     &lt;section id="projects"&gt;
      &lt;article&gt;
       Project 1
      &lt;/article&gt;
      &lt;article&gt;
       Project 2
      &lt;/article&gt;
      &lt;article&gt;
       Project 3
      &lt;/article&gt;
      &lt;article&gt;
       Project 4
      &lt;/article&gt;
      &lt;article&gt;
       Project 5
      &lt;/article&gt;
     &lt;/section&gt;&lt;!--projects--&gt;
  
     &lt;section id="blog"&gt;
      &lt;article&gt;
       Blog 1
      &lt;/article&gt;
      &lt;article&gt;
       Blog 2
      &lt;/article&gt;
      &lt;article&gt;
       Blog 3
      &lt;/article&gt;
      &lt;article&gt;
       Blog 4
      &lt;/article&gt;
      &lt;article&gt;
       Blog 5
      &lt;/article&gt;
     &lt;/section&gt;&lt;!--blog--&gt;
  
     &lt;section id="contact"&gt;
      &lt;article&gt;
       Contact
      &lt;/article&gt;
     &lt;/section&gt;&lt;!--contact--&gt;
  
     &lt;section id="tweets"&gt;
      &lt;article&gt;
       Tweets
      &lt;/article&gt;
     &lt;/section&gt;&lt;!--tweets--&gt;
  
     &lt;section id="comments"&gt;
      &lt;article&gt;
       Comments
      &lt;/article&gt;
     &lt;/section&gt;&lt;!--comments--&gt;
  
     &lt;section id="links"&gt;
      &lt;article&gt;
       Links
      &lt;/article&gt;
     &lt;/section&gt;&lt;!--links--&gt;
  
          &lt;/div&gt; &lt;!--container--&gt;
  </code></pre>
  
  <p>Here is the CSS:</p>
  
  <pre><code>#container{
   height: 600px;
   display: inline;
  }
  
  section{
   display: inline;
  }
  
  article{
   height: 600px;
   width: 300px;
   display: inline;
  }
  </code></pre>
  
  <p>This is what it looks like: </p>
  
  <p><a href="http://danixd.com/archive/html5.html" rel="nofollow noreferrer">http://danixd.com/archive/html5.html</a></p>
  
  <p>Any ideas?</p>