Почему элементы не отображаются в строке?

Question

Что-то странное происходит ... Я использую display: inline-block, чтобы показать элементы inline. Все было нормально, пока не добавили новые элементы. Вот примеры:

CSS:

section#main{ 
    width: 960px; 
    margin: 7% auto 0; 
    background: #000; 
    opacity: 0.86; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    padding: 5px; 
} 

div#video{ 
    border: 1px solid red; 
    width: 640px; 
    height: 360px; 
    margin: 10px; 
    display: inline-block; 
} 

nav{ 
    margin: 10px; 
    border: 1px solid yellow; 
    display: inline-block; 
    height: 360px; 
    width: 270px; 
} 

HTML:

<section id="main"> 
     <div id="video"></div> 
     <nav> 
      <ul> 
      <li>Keliaujame ?... JAV: ?ikaga/Chicago S01E03</li>   
      </ul> 
     </nav> 
     <div id="comments"></div> 
    </section> 

http://jsfiddle.net/nonamez/PfeP5/2/

Что может быть не так?

Answer 1

Это вертикальная проблема выравнивания, просто установить оба элемента вертикального выравнивания к началу

div#video{ 
    vertical-align:top; 
} 

nav{ 
    vertical-align:top; 
} 

http://jsfiddle.net/xHNJm/

Answer 2

удалить display: inline-block; от обоих

добавить float: left; как к

добавить <div style="clear: both"></div> ниже <div id="comments">

как показано в этом скрипке: http://jsfiddle.net/9BsS3/

Answer 3

Лично я всегда стараюсь избегать использования инлайн-блока, только из-за Каболку поведение кросс-браузера.

Я хотел бы использовать следующий CSS (извлекая дисплей: встроенный блок, а также использовать поплавок: слева в этом месте (обеспечение родительского элемента также плавал обеспечить очистку ребенка плавающих элементов):

section#main{ 
    width: 960px; 
    margin: 7% auto 0; 
    float:left; 
    background: #000; 
    opacity: 0.86; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    padding: 5px; 
} 

div#video{ 
    border: 1px solid red; 
    width: 640px; 
    height: 360px; 
    margin: 10px; 
    float:left; 
} 

nav{ 
    margin: 10px; 
    border: 1px solid yellow; 
    float:left; 
    height: 360px; 
    width: 270px; 
} 
nav ul { 
    margin:0; 
    padding:0; 
    list-style:none; 
} 
nav li { 
    color:#fff; 
}