Question

I am looking to make a horizontally layed website but I am having issues with the display: inline rule.

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.

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;
}

This is what it looks like:

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

Any ideas?

Answer 1

Try this:

#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 a css propety of display: inline aren’t intended for your purposes.