Strange behavior while using display inline-block ...why?

Question

HTML

<div class="menu">
    <p>normal</p>
</div>
<div class="menu">
    <p>normal</p>
</div>
<div class="menu">
    <p>normal</p>
</div>
<div class="menu">
    <p>Why does this div stays at the top</p>
</div>

CSS

.menu{
    width:120px;
    background-color:red;
    display:inline-block;
    height:400px;
}

http://jsfiddle.net/jezVt/

I have four divs aligned next to each other using inline-block. When I enter text inside the div using p tag, the div with two lines stays at the top while the other three divs(has just one line text) are aligned properly.

Help please..

add float:left; in .menu

Amit
– Amit

2014-06-26 09:00:32 +00:00
Commented Jun 26, 2014 at 9:00 — Amit
– Amit, Commented Jun 26, 2014 at 9:00

Alex Wilson · Accepted Answer · 2014-06-26 08:46:32Z

2

add you code vertical-align:top; demo

answered Jun 26, 2014 at 8:46

Alex Wilson

2,41914 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jon · Accepted Answer · 2014-06-26 08:55:16Z

The reason is that just like every inline element, your .menu elements have the default value baseline for their vertical-align property. This means that when the browser calculates layout for the .menu elements that appear side-by-side, each element is positioned so that the baseline of their contents is vertically aligned with that of the others.

In this specific case, this means that the baseline of last line of text in each .menu is aligned with that of the others. You will notice that by adding more text and making it to occupy three or more lines, the element that contains this text is going to be "pulled upwards" more and more in relation to the others.

Finally, as everyone has said using vertical-align: top lets the browser know that you want the divs to be aligned with respect to the top of their content, which produces the desired result.

aashi · Accepted Answer · 2014-06-26 08:46:48Z

1

write vertical-align:top; in css:http://jsfiddle.net/aashi/jezVt/1/

answered Jun 26, 2014 at 8:46

aashi

4923 silver badges11 bronze badges

Comments

marc_s · Accepted Answer · 2016-04-23 20:09:49Z

1

From my first look, is that you have to much text in the fourth column.

But use "vertical-align: top;" as the two previous answers.

edited Apr 23, 2016 at 20:09

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Jun 26, 2014 at 8:50

Jens Porsborg

153 bronze badges

Comments

Mayank · Accepted Answer · 2014-06-26 08:52:47Z

0

Why do you want to make divs as inline-block. When div is a block level element you can use that property itself.

[http://jsfiddle.net/jezVt/12/][1]

answered Jun 26, 2014 at 8:52

Mayank

1229 bronze badges

Comments

user1853128 · Accepted Answer · 2014-06-26 08:59:59Z

0

Alternatively you can try:

.menu{
    width:120px;
    background-color:red;
    display:inline-block;
    height:400px;
    float:left;
    margin: 2px;
}

answered Jun 26, 2014 at 8:59

user1853128

1,1147 gold badges20 silver badges47 bronze badges

Collectives™ on Stack Overflow

Strange behavior while using display inline-block ...why?

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related