Home/ Questions/Q 8649437
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T13:33:42+00:00

I have been trying to implement Chris Coyier’s inline-block + text justify solution to

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0