Why aren't my inline-block divs aligning properly?

Question

#inlineBLock1, #inlineBLock2{
    display:inline-block;
    width:200px;
    height:100px;
    border: 1px dashed #cccccc;
}

<div id="inlineBLock1">
    <img src="http://www.emec.org.uk/wp-content/uploads/2013/10/Aquamarine-Powers-Oyster-800-wave-energy-machine-in-operation-Image-Aquamarine-Power-300x199.jpg" width="50" height="50">
</div>
<div id="inlineBLock2">
    <p>Not aligned :(</p>
</div>

See http://jsfiddle.net/6FGHd/13/ for example.

It seems that inserting an image into one of the divs breaks the alignment.

Any ideas? Thanks.

Answer 1

Your answer is in your question.

Why aren't my inline-block divs aligning properly?

You apply:

vertical-align: top;

Demo :)