display: inline для элементов HTML5

Question

Я ищу веб-сайт с горизонтальным расположением, но у меня возникают проблемы с отображением: встроенное правило.

Это похоже на встроенные навигационные неупорядоченные списки, полностью переписывая высоту и ширину, установленные для статей (и или разделов) в CSS.

Вот 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--> 

Вот CSS:

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

section{ 
display: inline; 
} 

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

Это то, что он выглядит следующим образом:

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

Любые идеи?

Answer 1

Попробуйте это:

#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

элементов с помощью CSS propety из display: inline не предназначены для ваших целей.