title: Setting left position of an element that changes dynamically(in a loop)
body: <p>I have the following JavaScript code.
      ***</p>
  
  <blockquote>
    <p>var pos = document.getElementById('pos'); <br />
        pos.style.position = 'relative'; <br />
        pos.style.width = '100%'; <br />
        pos.style.height = '100%'; <br />
        pos.style.background = 'gray'; <br />
        for(i=1;i&lt;4;i++) <br />
        { <br />
        var div = document.createElement('div'); <br />
        var node = document.createTextNode("This is new."); <br />
        div.appendChild(node); <br />
        var j = i-1;<br />
        var f = Math.round(250/(i+1)); <br />
        var d = Math.round(250/i); <br />
        var col = 'rgb('+f+','+140+','+d+')'; <br />
        div.style.background = col; <br />
        div.style.width = '200px'; <br />
        div.style.height = '300px'; <br />
        div.style.position = 'relative'; <br />
        div.style.top = '0px'; <br />
        div.style.border = 'solid'; <br />
        div.style.borderColor = 'green'; <br />
        div.style.borderWidth = '2px'; <br />
        left = Math.floor((j*200)+30+30); <br />
        left = left+'px'; <br />
        div.style.left = '30px'; <br />
        pos.appendChild(div); <br />
        } <br /></p>
  </blockquote>
  
  <hr>
  
  <p>HTML code:
        ***</p>
  
  <blockquote>
    <p>&lt;div id = "pos"&gt;&lt;/div&gt;</p>
  </blockquote>
  
  <hr>
  
  <p>The first element is positioned correctly with 0px top and 30px left however the second and third are off the mark, I tried to use display as inline but that only set them on same line but the left positioning were not set. The result is 
  <a href="http://i.stack.imgur.com/8CYFf.png" rel="nofollow">as shown in this picture</a></p>
  
  <p><a href="http://i.stack.imgur.com/TXf0u.png" rel="nofollow">But I would like it to appear as:</a></p>