Why is this CSS playing?

Question

I have a very simple container with several child divs inside, displayed as inline-block . Everything works well until I embed the content in the child divs. When I have content in them, they seem to go down, for no apparent reason.

Here is all that works well.

And here is a violin in which all this goes bad (with content).

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

I had been with him for hours, but did not seem to understand him. Any help is greatly appreciated.

Answer 1

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

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

Or you can set vertical-align: top in the field.

Answer 2

Add vertical-align:top to the fields.