Why are items not showing in a row?

Question

Something strange is happening ... I am using display: inline-block to display inline elements. Everything was fine until new elements were added. Here are some examples:

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/

What could be wrong?

Answer 1

Regarding the vertical alignment problem, just set the vertical alignment of both elements at the top

 div#video{ vertical-align:top; } nav{ vertical-align:top; } 

http://jsfiddle.net/xHNJm/

Answer 2

remove display: inline-block; of

add float: left; in both

add <div style="clear: both"></div> below <div id="comments">

as shown in this script: http://jsfiddle.net/9BsS3/

Answer 3

Personally, I always try to avoid using the inline block, simply because of the cross browser with ropey support.

I would use the following CSS (removing the display: inline-block; using float: left in it place (ensuring that the parent element also floats to ensure that the child floating elements are cleared):

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