CODEWITHSUNDEEP
htmlcss
Kanishka
Kanishka

Reputation: 85

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

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..

Upvotes: 1

Views: 563

Answers (6)

Jens Porsborg
Jens Porsborg

Reputation: 15

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.

Upvotes: 1

user1853128
user1853128

Reputation: 1114

Alternatively you can try:

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

Upvotes: 0

Jon
Jon

Reputation: 437336

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.

Upvotes: 1

Mayank
Mayank

Reputation: 122

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]

Upvotes: 0

aashi
aashi

Reputation: 492

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

Upvotes: 1

Alex Wilson
Alex Wilson

Reputation: 2419

add you code vertical-align:top; demo

Upvotes: 2

Related Questions