Div position shifts when adding content

Question

Following yesterday's issue ( DOM Equidistant divs with inline-blocks and text justify won't work when inserting through JS ) which @Snuffleupagus was kind enough to help me understand, I stumbled into another weird browser behaviour.

Updated fiddle in here: http://jsfiddle.net/xmajox/NUJnZ/

When any kind of content is added (block or inline) to the divs they shift down. When all divs have content, they magically move back into their correct places.

I tried starting them all with some dummy content div and then just changing that children's text but it reacts the same way.

Any ideas?

Answer 1

Add vertical-align: top to these div's:

.rowSample > div {
    background: none repeat scroll 0 0 black;
    border: 1px solid yellow;
    color: white;
    display: inline-block;
    height: 50px;
    vertical-align: top;
    width: 50px;
}

Because these are elements with display:inline-block they are aligned as inline elements but have explicit dimensions. For example, <img> tags by default have inline-block display mode, so to align them inside text you have to specify a desired vertical-align property.

Please take a look at the example fiddle: http://jsfiddle.net/a6Hu2/