I have created a little work area where I want to design diferent logos and designs. and I have enabled a drag and drop engine. While all this works well I have noticed that the items on my work area tend to spill over the boundaries of the <div> I created for them. Is there a way to limit the text asn pictures that I place in the work area from leaving the limits of the work area?? here is the code for the division. The textarea with the Hello World and the <img> area with the pitcture010.jpg are the two items on this work area. <div name = "myContainer" id="myContainer" style="position:absolute; width:350px; height:200px; border:2px outset; left:125px; top:50px"> <table border="0" cellspacing="0" cellpadding="5"> <tr> <td><textarea name="text" cols="30" rows="1" class="drag"> Hello World </textarea></td> </tr> </table> <p align="center"> <img src=picture010.jpg name=image width="144" height="100" border="0" class="drag"> </p> </div> The textarea with the Hello World and the <img> area with the pitcture010.jpg are the two items on this work area. here is the code for the drag and drop. <!-- .drag{position:relative;cursor:hand} //--> <script language="JavaScript1.2" type="text/javascript"> <!-- /*Credit JavaScript Kit www.javascriptkit.com*/ var dragapproved=false var z,x,y function move() { if (event.button==1&&dragapproved) { z.style.pixelLeft=temp1+event.clientX-x z.style.pixelTop=temp2+event.clientY-y return false } } function drags() { if (!document.all) return if (event.srcElement.className=="drag") { dragapproved=true z=event.srcElement temp1=z.style.pixelLeft temp2=z.style.pixelTop x=event.clientX y=event.clientY document.onmousemove=move } } document.onmousedown=drags document.onmouseup=new Function("dragapproved=false") any help will be greatly apreciated. thanks armando