Child element position relative working wrong

[tR4NJE]

I have a div element of css width and height, 800x600. I am using javascript to generate three object elements in the div that should be in a diagonal line, touching each other. I am using position:relative, and the left and top css properties to position the object elements. However when I do it this way, there is a horizontal gap between the squares that shouldn't be there. When I use positon:fixed, they line up how I want it but not inside the div element.Html of my div element\[code\]<div id="Stage" style="background:black;width:800px;height:600px;margin-left:auto;margin-right:auto;overflow:hidden;">\[/code\]and my javascript\[code\]w="w";level_data =http://stackoverflow.com/questions/14577053/[[w,0,0],[0,w,0],[0,0,w],];function generate(level_data){ for(row=0;row<level_data.length;row++){ for(col=0;col<level_data[row].length;col++){ posx = col*50; posy=row*50; if(level_data[row][col]=="w"){ entity = document.createElement('object'); entity.style.position = "relative"; entity.style.left = String(posx)+"px"; entity.style.top = String(posy)+"px"; entity.data = "http://stackoverflow.com/questions/14577053/Objects/Sprites/Wall.jpg"; document.getElementById("Stage").appendChild(entity); } } }}generate(level_data);\[/code\]This is what I get: Link1This is what I want: Link2 but the redsquares inside the big black square instead. What's the problem?