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:

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?

Answer 1

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.