Why does the innerHTML of several inline-blocks nested in a block element affect the positioning of the inline-blocks?

Question

In these examples (NOTE: make sure you drag out the result window wide enough)

http://jsfiddle.net/pPyaG/

http://jsfiddle.net/pPyaG/1/

http://jsfiddl

Answer 1

Add vertical-align: top where you have display: inline-block.

http://jsfiddle.net/thirtydot/pPyaG/3/

The initial value of vertical-align is baseline, which causes the issue you're experiencing.

Read this, particularly the "baseline" section: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

A comparison of how common values of vertical-align look: http://www.brunildo.org/test/inline-block.html