title: Dynamically Created HTML object not having CSS applied to it
body: <p>Final product: Web page that is filled in by data on a word document which is fed into a recurring HTML structure.</p>
  
  <p>Problem: When ran, the HTML elements are created, but the <em>CSS classes are not applied until the window is resized.</em> </p>
  
  <p>Javascrip:</p>
  
  <pre><code>    for (i=0; i&lt;=timeline_data.length; i++){
          var newParent = document.getElementById('wgt-timeline-bdy-wrap-id');
          var newItem = document.createElement('div');
          newParent.appendChild(newItem);
          newItem.setAttribute('class','wgt-timeline-bdy-item');
  
          var newText = document.createElement('p');
          newItem.appendChild(newText);
          newText.setAttribute('class','timeline-new-text');
          newText.id="timeline-" + timeline_data[i].id + "-text";
  
      }
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.wgt-timeline-bdy-item {
      display: inline-block;
      font-size: 20px;
      position: relative;
      text-align: center;
      vertical-align: middle;
      width: 100%;
  }
  
  .timeline-new-text{
      font-size: 30px;
      position: relative;
      top:40px;
  }
  </code></pre>
  
  <p>Nothing unexpected in the HTML, wgt-timeline-bdy-wrap-id is a div.</p>
  
  <p>Thank you in advance for your help</p>