Why is this CSS playing up?

Question

I have a very basic container with a few children divs inside, displayed as inline-block. All works well until I actually insert content into the children divs. When I have content in them, they seem to move down, for no apparent reason.

Here is the fiddle of it all working well.

And here is the fiddle with it all messing up (with the content).

Can someone please tell me why this is happening and how to solve it?

I've been at it for hours but cant seem to figure it out. Any help is much appreciated.

Answer 1

Add vertical-align:top to the boxes.

Answer 2

Instead of using display: inline-block use display: block; float: left;

http://jsfiddle.net/GtPWX/2/

Or you could set vertical-align: top on the boxes.