Align the inline-block DIV element to the top of the container element

Question

When two inline-block's div have different heights, why doesn't the shorter one align with the top of the container? (DEMO):

.container {
    border: 1px black solid;
    width: 320px;
    height: 120px;
}

.small {
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue;
}

.big {
    display: inline-block;
    border: 1px black solid;
    width: 40%;
    height: 50%;
    background: beige;
}

<div class="container">
    <div class="small"></div>
    <div class="big"></div>
</div>

How do I align a small div to the top of its container?

Answer 1

You need to add the vertical-align attribute to both child divs.

If .small is always shorter, just apply this property to .small. However, this property should be applied to .small and .big if either one is likely to be the highest.

.container{ 
    border: 1px black solid;
    width: 320px;
    height: 120px;    
}

.small{
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue; 
    vertical-align: top;   
}

.big {
    display: inline-block;
    border: 1px black solid;
    width: 40%;
    height: 50%;
    background: beige; 
    vertical-align: top;   
}

Vertical alignment affects in-row or table cell boxes, and this property has many different values. See https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align for more details.

Answer 2

Because by default, vertical-align is set to baseline.

Use vertical-align:top instead:

.small{
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue;   
    vertical-align:top; /* <---- this */
}

http://jsfiddle.net/Lighty_46/RHM5L/9/

Or as @f00644 said, you can also apply float to child elements.