why do the inline-block element arranged side by side as expected in csss

Question

<html>
<head>
    <style>
        div#one{
            display: inline-block;
            border: 1px solid green;
            width: 200px;
            height: 200px;
        }
        p {
            border: 1px solid black;

        }
        div {
            display: inline-block;
            border: 1px solid green;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="one">
        <p>Something here</p>
    </div>
    <div></div>
</body>
</html>

This is my code, I expected the divs to be arranged side-by-side but they are not. Why?

remove `display:inline-block` and use `float:left` if you need side-by-side.. — Mr_Green, Dec 26 '12 at 09:07
Maybe this will help you: http://stackoverflow.com/questions/1371307/displayblock-inside-displayinline. — , Dec 26 '12 at 09:13

score 4 · Answer 1 · answered Dec 26 '12 at 09:06

4

Add

vertical-align:top

to div.

JSFiddle demo

answered Dec 26 '12 at 09:06

Passerby

9,715
2
33
50

@dramasea Because by default `inline` elements has `vertical-align: text-bottom`. The first `div` has one line text, so that text bottom is considered; the second `div` is empty, so its own bottom is considered. – Passerby Dec 26 '12 at 09:18

score 1 · Answer 2 · answered Dec 26 '12 at 09:10

You shouldn't use inline-block in this case. This may cause errors on old browsers (IE;). Use "float" instead. http://jsfiddle.net/Tymek/HM835/

div {
    display: block; /* this */
    float: left; /* and this */
    border: 1px solid #0F0;
    width: 200px;
    height: 200px;
}

#one {
    border-color: #F00;
    width: 200px;
    height: 200px;
}

p {
    border: 1px solid #000;
}

<div id="one">
   <p>Something here</p>
</div>
<div>
    Lorem ipsum
</div>

why do the inline-block element arranged side by side as expected in csss

2 Answers2