Why the items is not show inline?

Question

Something strange happening... I am using display: inline-block to show elements inline. There was all ok until add added some new elements in it. Here is an examples:

god bad

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?

+1 for the pretty illustration. Though a fiddle would've been more useful ;) — Anirudh Ramanathan, Mar 12 '13 at 21:25
@fizzydrink That version has no content in the left block, which makes it work. — Tom van der Woerdt, Mar 12 '13 at 21:28
It's the `vertical-align` default of `baseline` that is aligning the second box at the point where the text sits. You need to set `vertical-align:top` on your `display:inline-block` elements. — andyb, Mar 12 '13 at 21:31
@fizzydrink The problem only occurs when there's content in the box. — Tom van der Woerdt, Mar 12 '13 at 21:35

score 4 · Accepted Answer · answered Mar 12 '13 at 21:29

4

That's a vertical alignment issue, just set both elements vertical alignment to top

div#video{
    vertical-align:top;
}

nav{
    vertical-align:top;
}

http://jsfiddle.net/xHNJm/

answered Mar 12 '13 at 21:29

Musa

96,336
17
118
137

oh, yeah, how i could forget about this... Last week i had the same thing – user1692333 Mar 12 '13 at 21:30
@musa - that works well too – fizzy drink Mar 12 '13 at 21:31

score 1 · Answer 2 · answered Mar 12 '13 at 21:30

1

remove display: inline-block; from both

add float: left; to both

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

as demonstrated in this fiddle: http://jsfiddle.net/9BsS3/

answered Mar 12 '13 at 21:30

fizzy drink

682
8
21

score 0 · Answer 3 · answered Mar 12 '13 at 21:33

Personally, I always try to avoid using inline-block, just because of the ropey behaviour cross-browser.

I would use the following CSS (removing the display:inline-block; and use float:left in it's place (ensuring the parent element is also floated to ensure the clearing of child floated elements):

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

Why the items is not show inline?

3 Answers3