Align the inline-block DIV on 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 both .small and .big if any of them may 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 inline or table cell boxes. 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 insteadvertical-align:top：

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