css - Why are these two inline-blocks not aligned? -

css - Why are these two inline-blocks not aligned? -

this question has reply here:

css inline-block elements not lining properly 5 answers

these 2 inline-block <div> should (at least, thought be) aligned:

class="lang-html prettyprint-override"><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 height of every <div> pixel precision:

class="lang-css prettyprint-override">.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 produces next result:

here fiddle of code.

this driving me crazy, result consistent across several browsers, must doing wrong.

can explain why, , provide fix?

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

.calendar { vertical-align: top; }

explanation: inline-blocks still "in-line" , vertical alignment baseline meaning aren't consistent , vary on height, top makes them consistently start @ top.

css