Why are these two inline-blocks not aligned?

Question

These two inline-block <div> should be (at least, I thought they would be) aligned:

<div class="calendar">
    <div class="month">
        <div class="month-name">January</div>
    </div>
    <div class="day">
        <div class="day-number">21</div>
        <div class="day-name">Wednesday</div>
    </div>
</div>

<div class="button"></div>

I've set the height of every <div> with a pixel precision:

.calendar {
    display: inline-block;
    width: 80px;
    height: 74px;
}
.calendar .month {
    background-color: firebrick;
    border-radius: 3px 3px 0 0;
}
.calendar .month-name {
    color: white;
    font-size: 13px;
    text-align: center;
    height: 26px;
}
.calendar .day {
    background-color: linen;
    border-radius: 0 0 3px 3px;
}
.calendar .day .day-number {
    color: black;
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    height: 30px;
}
.calendar .day .day-name {
    color: darkgray;
    font-size: 10px;
    text-align: center;
    height: 18px;
}

.button {
    background-color: silver;
    display: inline-block;
    border-radius: 3px;
    width: 220px;
    height: 74px;
}

But this produces the following result:

inline-block

Here is a fiddle of this code.

This is driving me crazy, but the result is consistent across several browsers, so I must be doing something wrong.

Can anyone explain why, and provide a fix?

@Oriol "This question has been asked before and already has an answer". No, I asked the question before. Better mark the other one as duplicate of this one? — BenMorel, Jun 25 '15 at 22:24
Yes, your question is older, but the other question is more "popular": 3953 vs 155 views, 10 vs 1 upvotes, 1 vs 0 favorites, 34 vs 5 upvotes in the answers. Feel free to discuss it in [meta](http://meta.stackoverflow.com/) if you disagree. — Oriol, Jun 25 '15 at 22:41
Kind of makes sense, I guess. Still, it's quite rude to get a message "This question has been asked before"; the message could be improved. — BenMorel, Jun 26 '15 at 20:39

meder omuraliev · Accepted Answer · 2013-02-13T21:17:36.767

8

Do vertical-align:top on whatever has inline-block.

.calendar { vertical-align: top; }

Explanation: inline-blocks are still "in-line" and the vertical alignment is baseline meaning they aren't consistent and it will vary on their height, top makes them consistently start at the top.

edited Feb 13 '13 at 21:17

answered Feb 13 '13 at 20:46

meder omuraliev

183,342
71
393
434

Thanks, can you explain why? – BenMorel Feb 13 '13 at 20:50
inline-blocks are still "in-line" and the vertical alignment is baseline meaning they aren't consistent and it will vary on their height, `top` makes them consistently start at the top. – meder omuraliev Feb 13 '13 at 20:56

score 4 · Answer 2 · answered Feb 13 '13 at 20:46

4

Set the vertical align to top on the calendar div

.calendar {
    display: inline-block;
    width: 80px;
    height: 74px;
    vertical-align:top;
}

jsFiddle example

answered Feb 13 '13 at 20:46

j08691

204,283
31
260
272

Thanks, can you explain why? – BenMorel Feb 13 '13 at 20:50
1

Because the default vertical alignment is baseline, and you need them top aligned. – j08691 Feb 13 '13 at 20:56
Thanks, your answers being equivalent, I've accepted one and upvoted the other! – BenMorel Feb 13 '13 at 21:17

Why are these two inline-blocks not aligned?

2 Answers2

Related