Display: HTML5 inline element

Question

I want to make a horizontally laid website, but I'm having problems displaying: a built-in rule.

It looks like it focuses on built-in navigation disordered lists, completely rewriting the height and width set for articles (and or sections) in CSS.

Here is the html:

<div id="container">
   <section id="about" class="first">
    <article>
     About Us
    </article>
   </section><!--about-->

   <section id="projects">
    <article>
     Project 1
    </article>
    <article>
     Project 2
    </article>
    <article>
     Project 3
    </article>
    <article>
     Project 4
    </article>
    <article>
     Project 5
    </article>
   </section><!--projects-->

   <section id="blog">
    <article>
     Blog 1
    </article>
    <article>
     Blog 2
    </article>
    <article>
     Blog 3
    </article>
    <article>
     Blog 4
    </article>
    <article>
     Blog 5
    </article>
   </section><!--blog-->

   <section id="contact">
    <article>
     Contact
    </article>
   </section><!--contact-->

   <section id="tweets">
    <article>
     Tweets
    </article>
   </section><!--tweets-->

   <section id="comments">
    <article>
     Comments
    </article>
   </section><!--comments-->

   <section id="links">
    <article>
     Links
    </article>
   </section><!--links-->

        </div> <!--container-->

Here is the CSS:

#container{
 height: 600px;
 display: inline;
}

section{
 display: inline;
}

article{
 height: 600px;
 width: 300px;
 display: inline;
}

It looks like this:

http://danixd.com/archive/html5.html

Any ideas?

Answer 1

Try the following:

#container{
 height: 600px;
 float: left;
 overflow: auto;
}

section{
 float: left;
}

article{
 height: 600px;
 width: 300px;
 float: left;
}

Read: http://www.webdesignfromscratch.com/html-css/css-block-and-inline.php

Elements with css propety are display: inlinenot intended for your purposes.