[jQuery] position problem

[merihsaka...@yahoo.com]

Hi all,

I have 2 different div which names are is "insideParent" and
"insideParent2" .
And when I click the Add Element button the new div is creating inside
the insideParent.
the problem is when I create a new div , the second div's position is
changing.. Its going down..
Also when I clicked the "Remove Element" button, Its going up.
Is there a way to do it static.

Not : this two div is draggable and All my codes are below..

<script type="text/javascript" src="js/dragYeni/new/jquery-1.2.6.js"></
script>
<script type="text/javascript" src="js/dragYeni/new/ui.core.js"></
script>
<script type="text/javascript" src="js/dragYeni/new/ui.draggable.js"></
script>

<style type="text/css">
#parentElem
{
        border-style: dotted;
        border-color: #9FADB0;
        width: 122px;
        height: 200px;
        border: 1px solid #fffff;
        top: 42px;
        left: 72px;
        position: absolute;
        overflow: hidden;
        color: #000;
}

#insideParent
{
        color: #fff;
}


.frameClass
{
        border: 1px dotted #999;
}
</style>

<script type="text/javascript">
function addEvent(image_path) {
      var ni = document.getElementById('insideParent');
      var divIdName = "myDiv";
      var newdiv = document.createElement('div');
      newdiv.setAttribute("id",divIdName);
      newdiv.innerHTML = "<a href=\"#\" style=\"border:0px\" > <img
src=\"images/demo_img/penguin2.jpg\" border=\"0\"/> </a>";
      ni.appendChild(newdiv);
  }


function removeElement() {
  var d = document.getElementById('insideParent');
  var olddiv = document.getElementById('myDiv');
  d.removeChild(olddiv);
}

</script>

<div class="img-container" id="parentElem">
             <div class="scale-image" id="insideParent"></div>
             <div class="scale-image2" id="insideParent2"><img
src="images/demo_img/penguin.jpg" border="0"/></div>
div>

<a href="javascript:;" onclick="addEvent('<img src=\'images/demo_img/
penguin.jpg\' name=\'img1665\' id=\'img1665\' width=\'100%\' border=
\'0\'>');" ><b>Add Element</b></a>
<a href="javascript:;" onclick="removeElement();"><b>Remove Element</
b></a>

<script type="text/javascript">


    jQuery(document).ready(
       function(ev, ui)
            {

                   jQuery('#insideParent').draggable({
                         zIndex:  1000,
                         ghosting: false,
                         opacity: 0.7,
                         containment : 'parent'


                    });

                    jQuery('#insideParent2').draggable(
                            {
                                zIndex:         1000,
                                ghosting:       false,
                                opacity:        0.7,
                                containment : 'parent'

                            }
                    );


            }
    );
</script>


Thank you..