Text-align: justify not working on dynamically created content
css, html, javascript, jquery
Solution
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/
Problem
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.