DOM Equidistant divs with inline-blocks and text justify won't work when inserting through JS

Question

I have been trying to implement Chris Coyier's inline-block + text justify solution to automatically distribute div's horizontally in a given wrapper's width. http://css-tricks.com/equidistant-objects-with-css/

This works great when the elements are imediately loaded into the DOM but for some reason fails when adding elements programattically through JS. It's as if the browser just ignores the css properties.

Check out this fiddle for a very basic example: http://jsfiddle.net/xmajox/NUJnZ/ The first two rows are added on HTML load. Click the button to add more in run time through JS.

Initially I thought it could be somehow related to the use of pseudo-element :after so I tried a different version with a DOM node instead: http://jsfiddle.net/xmajox/wnPSA/ Unfortunately it reacts exactly the same way.

Anyone has any idea why this happens? or better yet, how to fix/prevent it?

Answer 1

There needs to be some form of whitespace between the elements for this to work, see this: http://jsfiddle.net/NUJnZ/22/

Notice in the third row that there's no space between the DIVs. When jQuery appends the new element there's no leading or trailing whitespace.

Simply add a trailing space with .before(' ') and the elements line up properly. (if you use .after(' ') there's a spacing issue on the last element)

Updated fiddle: http://jsfiddle.net/NUJnZ/24/