How to make an inline-block box stick to the top? [duplicate]

Question

I try to make the blue container stick to the top. How can I manage that?

HTML:

<div class="container">
    <div class="a">blue</div>
    <div class="b">green</div>
</div>

CSS:

.a {
    width:100px;
    height:400px;
    display:inline-block;
    background-color:blue;
}
.b {
    width:400px;
    height:600px;
    display:inline-block;
    background-color: green;
}
.container {
    vertical-align:top;
}

http://jsfiddle.net/xswa4/

vertical-align: top;

doesn't work...

Answer 1

You should use vertical-align:top; on the element .a itself, not the parent .container:

.a {
    display:inline-block;
    background-color:blue;
    vertical-align:top;
}

JSFiddle Demo

Answer 2

Your vertical-align needs to be on the blue container, not the parent container.

.a
{
    width:100px;
    height:400px;
    display:inline-block;
    background-color:blue;
    vertical-align: top;
}

Fiddle: http://jsfiddle.net/xswa4/3/