[SOLVED] Javascript and css DIV problem

[coderage]

Hi

I have (1)

 

<DIV id="mainbox" style="overflow:hidden; border:1px solid red; position:absolute; left:100; top:100; height:400px; width:400px;">

  <img id="101" src="1.jpg" style="height:100px; width:100px;" alt="1"></img>
  <img id="102" src="2.jpg" style="height:100px; width:100px;" alt="2"></img>

</DIV

 

(2) I can move these two images in the DIV using Javascript.

 

(3)But when i add a new image using document.createElement("IMG") and add to this DIV using

 

function addTail()
{
tailCount++ // now 3
var d=document.getElementById('mainbox');
var newTile=document.createElement("IMG");
newTail.setAttribute('src','tiles/3.jpg');
newTail.setAttribute('id',tailCount);
newTail.setAttribute('height',256);
newTail.setAttribute('width',256);
newTail.style.left=nl[tailCount-1];
newTile.style.top=0;
d.appendChild(newTail);
}

the new image is added in the mainbox DIV but, not accessible. i want it to get attached to the end of the existing 2 boxes (like snake game)

 

but instead the new imaged keeps lying on in the background inside the DIV and the First two images move inside the DIV on top of the new one.

 

Sombody plz tell me how to fix this.

thanks

[coderage]

This is complete BODY tag of the page. DOM inspector shows the new images add to the "mover" DIV.

 

<div id="mainbox" style="overflow:hidden; border:1px solid red; position:absolute; left:256; top:100; height:512px; width:768px;">

  <img id="101" src="1.jpg" style="height:256px; width:256px;" alt="1"></img>

  <img id="102" src="2.jpg" style="height:256px; width:256px;" alt="2"></img>

 

  <div id="mover" style="overflow:hidden; border:0px solid blue; position:absolute; left:0; top:0; height:512px; width:768px;"

onMouseDown="mainboxMouseDown(event);" onMouseUp="mainboxMouseUp(event);"  onMouseMove="mainboxMouseMove(event);">

  </div>

[coderage]

I figured it out, these things needed to be done in the javascript function

 

function addTail()
{
tailCount++ // now 3
var d=document.getElementById('mainbox');

var d2=document.getElementById('mover');   ' ADDITION

var newTile=document.createElement("IMG");

newTail.style.position='absolute';                ' ADDITION

newTail.setAttribute('src','tiles/3.jpg');
newTail.setAttribute('id',tailCount);
newTail.setAttribute('height',256);
newTail.setAttribute('width',256);

newTail.style.left=nl[tailCount-1];
newTile.style.top=0;
d.appendChild(newTail);         REPLACING this line with

d.insertBefore(newTail, d2);
}



Thanks for the DOM suggestion