Text-align: justify not working on dynamically created content

Question

I'm trying use text-align:justify and display:inline-block as described in this post to style some dynamically created elements. After banging my head against the wall checking for CSS conflicts, I finally realized that it was that the alignment wasn't being re-evaluated after the content was created. I'm wondering if anybody knows a work-around for this. Is there a way to force styles to be re-evaluated on a dynamically created element?

EDIT - HTML:

<div id="container" class="flush">

</div>

<div class="flush">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS:

.flush{
text-align: justify;
width: 500px;
height: 250px;
background: #00f;
}

.flush div{
display: inline-block;
width: 101px;
height: 100px;
background: #f00;
}

JS:

for(var i = 0; i<5; i++){  
  $('#container').append("<div></div>");
}

Here's a jsfiddle example to illustrate. Notice how the hard-coded elements are justified, while the dynamically created ones aren't.

Answer 1

Just add a space after dynamically created div ;)

$('#container').append("<div></div> ");

Have phun!

Edit

This is better

$('#container').append("<div></div>\n\r");

http://jsfiddle.net/ergec/4pswV/