I am using the Drag and Drop framework for ASP.NET, and the javascript functionality is working fine. I dynamically create DIV elements which nest inside a parent DIV element, and I assign the drag drop functionality to each of the dynamic divs.

The first set of divs I create are employees:

 

For Each drRow As DataRow In dsData.Tables(0).Rows  
strInsert = "<div id='Carer" & drRow.Item("UserId") & "' runat='server' class='Item' style='float: left; margin: 5px 5px 5px 5px; padding: 5px 5px 5px 5px; border: solid 1px black;'>"  
strInsert = strInsert & drRow.Item("UserName")  
strInsert = strInsert & "</div>"
divCarer.InnerHtml = divCarer.InnerHtml & strInsert 
Next

Then I create a list of jobs to be assigned to them using the same sort of code.

When I click and drag a Job, the location is correct and the click picks up the correct job and drags it.

However, when I try to drop the item onto the Employee DIVs, the location I can drop them is offset to the right by around 100px from where the DIV appears to be. This is occuring in IE9, Firefox 12 and Chrome v27 (both are fully up to date).

I have tried removing the float, the margins, padding and borders, each time I end up with this 100px offset for the DIV.

Has anyone come across this before? Am I making horrible CSS mistakes or is this something else in the Javascript I'm not aware of?

Here is the section of HTML output (sorry about the mess):

<table width="1000px" style="clear: both">             <tr>             <td>                 <div id="MainContent">                             <script type="text/javascript">         Sys.Application.add_load(app_loaded);

        function app_loaded() {             var dd = new $IG.DragDropBehavior();             var Unresourced = $get("ctl00_ContentPlaceHolder_divUnresourced");

            for (var i = 0; i < Unresourced.childNodes.length; i++) {                 if (Unresourced.childNodes[i].getAttribute) {                     dd.addSourceElement(Unresourced.childNodes[i]);                 }             }

            var Carer = $get("ctl00_ContentPlaceHolder_divCarer");

            for (var i = 0; i < Carer.childNodes.length; i++) {                 if (Carer.childNodes[i].getAttribute) {                     dd.addTargetElement(Carer.childNodes[i], true);                 }             }

            //dd.addTargetElement($get("ctl00_ContentPlaceHolder_divCarer"), true);

            dd.get_events().addDropHandler(drop);         }

        function drop(source, eventArgs) {             var Unresourced = $get("ctl00_ContentPlaceHolder_divUnresourced");             //var Error = $get("ctl00_ContentPlaceHolder_lblError");             //var Carer = $get("ctl00_ContentPlaceHolder_divCarer");

            //Error.value = '';

            //var div = document.createElement("div");             var sourceX = eventArgs.get_manager().get_source().element;             var targetX = eventArgs.get_manager().get_targetElement();                         var checksentVal = check_sent(sourceX.id, targetX.id);

            if (checksentVal == true) {                 Unresourced.removeChild($get(sourceX.id));             }             else {                 Error.value = 'Not Sent';             }

            //div.innerHTML = source.innerHTML;             //div.setAttribute("id", source.attributes["id"].value);             //div.setAttribute("class", source.attributes["class"].value);             //div.setAttribute("className", source.attributes["class"].value);                         //var dd = new $IG.DragDropBehavior();             //dd.removeSource(div);                         //Carer.appendChild(div);         }

        function check_sent(SourceId, TargetId) {             var TextboxSource = $get("ctl00_ContentPlaceHolder_txtCarerEvent");             var TextboxTarget = $get("ctl00_ContentPlaceHolder_txtCarerId");             //var Button = $get("inputCarer");

            //var Button = document.getElementById("ctl00_ContentPlaceHolder_btnCarerClick");             //if (typeof Button.onclick == "function") {             //    Button.onclick.apply(Button);             //}

            TextboxSource.value = SourceId;             TextboxTarget.value = TargetId;

            var btn = document.getElementById("ctl00_ContentPlaceHolder_btnCarerClick");             if (btn) btn.click();

            //Button.click;

            //if (Textbox.value == "1") {             //    return true;             //}             //else {             //    return false;             //}         }     </script>     <div>         <span id="ctl00_ContentPlaceHolder_lblError" class="Item" style="color:Red;"></span>         <input name="ctl00$ContentPlaceHolder$txtCarerEvent" type="text" id="ctl00_ContentPlaceHolder_txtCarerEvent" class="hiddenItem" />         <input name="ctl00$ContentPlaceHolder$txtCarerId" type="text" id="ctl00_ContentPlaceHolder_txtCarerId" class="hiddenItem" />         <input type="submit" name="ctl00$ContentPlaceHolder$btnCarerClick" value="" id="ctl00_ContentPlaceHolder_btnCarerClick" class="hiddenItem" />     </div>     <div style="clear: both;"></div>     <div id="ctl00_ContentPlaceHolder_divCarer" style="width: 100%; float: right;"><div id='Carer526' runat='server' class='Item' style='float: left; margin: 5px 5px 5px 5px; padding: 5px 5px 5px 5px; border: solid 1px black;'>Martha Carer</div><div id='Carer527' runat='server' class='Item' style='float: left; margin: 5px 5px 5px 5px; padding: 5px 5px 5px 5px; border: solid 1px black;'>Bob Marley</div><div id='Carer528' runat='server' class='Item' style='float: left; margin: 5px 5px 5px 5px; padding: 5px 5px 5px 5px; border: solid 1px black;'>Ian Slaughter</div><div id='Carer529' runat='server' class='Item' style='float: left; margin: 5px 5px 5px 5px; padding: 5px 5px 5px 5px; border: solid 1px black;'>John  Smith</div><div id='Carer530' runat='server' class='Item' style='float: left; margin: 5px 5px 5px 5px; padding: 5px 5px 5px 5px; border: solid 1px black;'>Ian Jones</div></div>     <div style="clear: both;"></div>     <div id="ctl00_ContentPlaceHolder_divUnresourced" style="width: 100%; float: left;"><div style='clear: both;'></div><div id='Job8001779' runat='server' class='Item moveable' style='float: left; margin: 5px 5px 5px 5px; padding: 5px 5px 5px 5px; border: solid 1px black;'>19:00 : will smith</div></div>     <div style="clear: both;"></div>

                </div>             </td>         </tr>     </table>