Horizontally distributed, dynamic content

Question

I have a fluid-width div filled with thumbnails from a JSON query, and I am attempting to evenly distribute these thumbnails across the width of the div. These thumbnails must be allowed to wrap and reflow if the width of the enclosing div changes, and may vary in x- and y- dimensions, as well as in the number of thumbnails loaded.

I have found using text-align: justify; and display: inline-block does exactly what I want with static HTML elements, like so:
http://jsfiddle.net/skywalkar/gUcvq/

When I do the same thing with content fetched via JavaScript, however, it reverts to plain left-justified alignment (if it even renders at all-- Chrome and Firefox render it as left-justified, but IE seems to give up displaying the thumbnails altogether!):
http://jsfiddle.net/skywalkar/KdLyx/

My question, then, is this:
How can I force the JavaScript-loaded thumbnails to be horizontally justified like the HTML version?

Answer 1

You have 2 problems here. First, your span is outside of the div (honestly, you don't even need the span, just use the :after pseudo element).

Second, justification relies on whitespace. You're inserting your images without including a space/newline/etc. That's why they won't justify.

http://jsfiddle.net/KdLyx/7/