Div moves down, while trying to keep it aligned with others

Question

I have one parent div and multiple child divs placed in one row. These child divs are created dynamically, and I don't know how many of them will be created in the moment of rendering page. I want parent div to have fixed width, and to have horizontal scrollbar in case all child divs are not visible. This works fine. But when I have content inside my child div, that div moves down, and it's not alligned with other divs. I'm not sure where is the problem?

Here's the jsFiddle example.

I tried to put position:absolute to inner content of child div, but that didn't help much.

Answer 1

I added:

div {
    vertical-align:top;
}

http://jsfiddle.net/LSZZx/30/