Align inline-block DIVs to top of container element

css

Solution

Because the `vertical-align` is set at baseline as default.

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 could apply `float` to the child elements as well.

Problem

When two `inline-block` `div`s have different heights, why does the shorter of the two not align to 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 can I align the small `div` at the top of its container?

Original source