title: Dynamically created Div's, children of outer Div, position wrong in Chrome, but correct in IE
body: <p>I have some javascript which dynamically creates DIV elements containing data from JSON. I append these DIVs to a parent 'outerDiv'.</p>
  
  <p>I want the OuterDiv to be a container that remains in the centre horizontally and butted against the top of window.</p>
  
  <p>The inner DIVs I want then arranged within the container in a specific way.</p>
  
  <p>I thought I had achieved what I wanted since it displays correctly in IE, but when I open it in Chrome, all the DIVs sit on top of one another within the outerDIV container.</p>
  
  <p>Here is my code...</p>
  
  <pre><code>&lt;script&gt;
  
  var data = { "users":[
      { "Club" : "Ashford",
      "Defeated" : false,
      "Score" : 520000,
      "Team Name" : "Assassins",
      "Id" : 1
    },
    { "Club" : "Eltham Hill",
      "Defeated" : true,
      "Score" : 480000,
      "Team Name" : "Crusaders",
      "Id" : 2
    },
    { "Club" : "Sittingbourne",
      "Defeated" : false,
      "Score" : 610000,
      "Team Name" : "Strikers",
      "Id" : 3
    },
    { "Club" : "Watford",
      "Defeated" : true,
      "Score" : 180000,
      "Team Name" : "Wanderers",
      "Id" : 4
    }
  ]}
  
  
  var outerDiv = document.createElement("div");
  outerDiv.id = "map";
  document.body.appendChild(outerDiv);
  //document.body.style.position='relative';
  //document.body.style.left=200;
  
  for (var z in data.users) {
  
      if (z % 2 == 0){
      var divTag = document.createElement("div");
      divTag.id = data.users[z].Id;
      divTag.innerHTML = "&lt;H2&gt;" + data.users[z].Club + "&lt;/h2&gt;" + "&lt;/br&gt; &lt;h3&gt;" + data.users[z].Score +"&lt;/h3&gt;";
      document.getElementById('map').appendChild(divTag);
      document.getElementById(data.users[z].Id).style.position='absolute';
      document.getElementById(data.users[z].Id).style.left=10;
      document.getElementById(data.users[z].Id).style.top=(data.users[z].Id - 1) * 100;
      document.getElementById(data.users[z].Id).style.color='rgb(0,100,255)';
          }
      else {
      var divTag = document.createElement("div");
      divTag.id = data.users[z].Id;
      divTag.innerHTML = "&lt;H2&gt;" + data.users[z].Club + "&lt;/h2&gt;" + "&lt;/br&gt; &lt;h3&gt;" + data.users[z].Score +"&lt;/h3&gt;";
      document.getElementById('map').appendChild(divTag);
      document.getElementById(data.users[z].Id).style.position='absolute';
      document.getElementById(data.users[z].Id).style.left=600;
      document.getElementById(data.users[z].Id).style.top=(data.users[z].Id - 1) * 100;
      document.getElementById(data.users[z].Id).style.color='rgb(200,10,20)';
          }
  }
  
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I have this CSS in Head at moment...</p>
  
  <pre><code>&lt;style&gt;
  
  div h3 {color: green;}
  
  div#map{
     width: 600px;
     height: 2000px;
     position: absolute;
     top: 0%;
     left: 20%;
  
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>Why does it look correct in IE but not in Chrome?
  I want it to look correct in all browsers, desktop and mobile.</p>
  
  <p>Any help appreciated :)</p>