StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POChild element position relative working wrong
text
Body
copied!<p>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.</p> <p>Html of my div element</p> <pre><code><div id="Stage" style="background:black;width:800px;height:600px;margin-left:auto;margin-right:auto;overflow:hidden;"> </code></pre> <p>and my javascript</p> <pre><code>w="w"; level_data = [ [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 = "Objects/Sprites/Wall.jpg"; document.getElementById("Stage").appendChild(entity); } } } } generate(level_data); </code></pre> <p>This is what I get: <a href="http://www.newgrounds.com/dump/draw/67b485d58d6513626af9a41bc53535bb" rel="nofollow">Link1</a></p> <p>This is what I want: <a href="http://www.newgrounds.com/dump/draw/4a6a4ccd565d188f838b3dc46597c0b6" rel="nofollow">Link2</a> but the redsquares inside the big black square instead. What's the problem?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload