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.

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.

• javascript
• jquery
• html
• css

• how do you put the content in the div? since there is not need to do that in css, but in some cases $(".some").css('width', 300); will do api.jquery./css – Jorge Y. C. Rodriguez Commented Jan 28, 2014 at 17:36
• The content is being created by javascript. Most CSS properties declared in the stylesheet (height, width) are being applied. I think the issue is that the styles on the parent container need to be re-evaluated when the child elements are created. – A Steinmetz Commented Jan 28, 2014 at 17:46
• 1 Can you post some code and jsfiddle example to recreate the issue? – Comfortably Numb Commented Jan 28, 2014 at 17:52
• good suggestion! edited above. – A Steinmetz Commented Jan 28, 2014 at 18:25
• edited my answer second solution is better – Ergec Commented Jan 28, 2014 at 18:45

1 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/ergec/4pswV/