Incorrect display( negative margins maybe)?

Question

window.onload = function() {
  var target1 = document.getElementById("fruit");
  var target2 = document.getElementById("veg");
  var target3 = document.getElementById("games");
  var target4 = document.getElementById("numbers");

  var list = document.querySelectorAll("#dragsource li");
  for (i = 0; i < list.length; i++) {
    list[i].draggable = true;
    list[i].ondragstart = function(event) {
      var event = event || window.event;
      var dt = event.dataTransfer;
      dt.setData("text", event.target.id);
      dt.effectAllowed = "move";
    };
  }


  target1.ondragover = function(event) {
    var event = event || window.event;
    event.preventDefault();
  };

  target2.ondragover = function(event) {
    var event = event || window.event;
    event.preventDefault();
  };

  target3.ondragover = function(event) {
    var event = event || window.event;
    event.preventDefault();
  };

  target4.ondragover = function(event) {
    var event = event || window.event;
    event.preventDefault();
  };

  target1.ondrop = function(event) {
    var event = event || window.event;
    var dt = event.dataTransfer;
    event.preventDefault();
    var data = dt.getData("text");
    if (data === "item1" || data === "item2" || data === "item3" || data === "item4") {
      target1.appendChild(document.getElementById(data));
    }
  };

  target2.ondrop = function(event) {
    var event = event || window.event;
    var dt = event.dataTransfer;
    event.preventDefault();
    var data = dt.getData("text");
    if (data === "item5" || data === "item6" || data === "item7" || data === "item8") {
      target2.appendChild(document.getElementById(data));
    }
  };

  target3.ondrop = function(event) {
    var event = event || window.event;
    var dt = event.dataTransfer;
    event.preventDefault();
    var data = dt.getData("text");
    if (data === "item9" || data === "item10" || data === "item11" || data === "item12") {
      target3.appendChild(document.getElementById(data));
    }
  };

  target4.ondrop = function(event) {
    var event = event || window.event;
    var dt = event.dataTransfer;
    event.preventDefault();
    var data = dt.getData("text");
    if (data === "item13" || data === "item14" || data === "item15" || data === "item16" || data === "item17" || data === "item18" || data === "item19" || data === "item20" || data === "item21" || data === "item22" || data === "item23" || data === "item24" || data === "item25" || data === "item26" || data === "item27" || data === "item28" || data === "item29" || data === "item30" || data === "item31" || data === "item32" || data === "item33" || data === "item34" || data === "item35" || data === "item36" || data === "item37" || data === "item38" || data === "item39" || data === "item40" || data === "item41" || data === "item42" || data === "item43" || data === "item44" || data === "item45" || data === "item46" || data === "item47" || data === "item48" || data === "item49" || data === "item50" || data === "item51" || data === "item52" || data === "item53" || data === "item54" || data === "item55" || data === "item56" || data === "item57" || data === "item58" || data === "item59" || data === "item60") {
      target4.appendChild(document.getElementById(data));
    }
  };

};

html {
  background-color: silver;
  font-family: sans-serif;
  color: black;
}
header {
  background-color: black;
  color: yellow;
  text-align: center;
  padding: 5px;
}
nav {
  line-height: 20px;
  background-color: yellow;
  height: 625px;
  width: 100px;
  float: left;
  padding: 5px;
}
section {
  height: 220px;
  text-align: center;
  padding: 5px;
}
#fruit {
  width: 90px;
  height: 120px;
  left: 520px;
  top: 150px;
  padding: 10px;
  border: 2px solid green;
  position: absolute;
}
#veg {
  width: 90px;
  height: 120px;
  left: 670px;
  top: 150px;
  padding: 10px;
  border: 2px solid green;
  position: absolute;
}
#games {
  width: 90px;
  height: 120px;
  left: 820px;
  top: 150px;
  padding: 10px;
  border: 2px solid green;
  position: absolute;
}
#numbers {
  width: 90px;
  height: 120px;
  left: 970px;
  top: 150px;
  padding: 10px;
  border: 2px solid green;
  position: absolute;
}
#veg > * {
  display: none;
}
#fruit > * {
  display: none;
}
#games > * {
  display: none;
}
#numbers > * {
  display: none;
}
article {
  background-color: aqua;
  height: 395px;
  padding: 5px;
}
ul {
  margin: left;
  column-count: 6;
  column-gap: 20px;
  column-width: auto;
  text-align: left;
}
li {
  list-style-type: none;
  padding: 5px;
  margin: 2px;
  background-color: #CCCCFF;
  border: 2px double #CCCCCC;
}
footer {
  background-color: black;
  color: white;
  text-align: center;
  padding: 5px;
}

<header>
  <h1>FLOOR 1 W/S 3</h1>
</header>

<nav>
  <pre>
    <center><a href="Home.html"><b>HOME</b></a></center>

    <center><a href="GF.html"><b>Ground<br>Floor</b></a></center>
     
  <b>1st Floor</b>
     <a href="F1WS1.html">WS1</a
     <a href="F1WS2.html">WS2</a>
     <a href="F1WS3.html">WS3</a>
    
  <b>2nd Floor</b>
     <a href="F2WS1.html">WS1</a>
     <a href="F2WS2.html">WS2</a>
     <a href="F2WS3.html">WS3</a>
    
  <b>3nd Floor</b>
     <a href="F3WS1.html">WS1</a>
     <a href="F3WS2.html">WS2</a>
  </pre>


</nav>
<section>
  <h1>Choose a Box</h1>
  <ul id="fruit">Fruit
  </ul>
  <ul id="veg">Veg
  </ul>
  <ul id="games">Games
  </ul>
  <ul id="numbers">Numbers
  </ul>

</section>

<article>
  <ul id="dragsource">
    <li id="item1" draggable="true">Apple</li>
    <li id="item2" draggable="true">Banana</li>
    <li id="item3" draggable="true">Orange</li>
    <li id="item4" draggable="true">Pear</li>
    <li id="item5" draggable="true">Carrot</li>
    <li id="item6" draggable="true">Pea</li>
    <li id="item7" draggable="true">Potato</li>
    <li id="item8" draggable="true">Sprout</li>
    <li id="item9" draggable="true">Chess</li>
    <li id="item10" draggable="true">Dominos</li>
    <li id="item11" draggable="true">Monopoly</li>
    <li id="item12" draggable="true">Twister</li>
    <li id="item13" draggable="true">1</li>
    <li id="item14" draggable="true">2</li>
    <li id="item15" draggable="true">3</li>
    <li id="item16" draggable="true">4</li>
    <li id="item17" draggable="true">5</li>
    <li id="item18" draggable="true">6</li>
    <li id="item19" draggable="true">7</li>
    <li id="item20" draggable="true">8</li>
    <li id="item21" draggable="true">9</li>
    <li id="item22" draggable="true">10</li>
    <li id="item23" draggable="true">11</li>
    <li id="item24" draggable="true">12</li>
    <li id="item25" draggable="true">13</li>
    <li id="item26" draggable="true">14</li>
    <li id="item27" draggable="true">15</li>
    <li id="item28" draggable="true">16</li>
    <li id="item29" draggable="true">17</li>
    <li id="item30" draggable="true">18</li>
    <li id="item31" draggable="true">19</li>
    <li id="item32" draggable="true">20</li>
    <li id="item33" draggable="true">21</li>
    <li id="item34" draggable="true">22</li>
    <li id="item35" draggable="true">23</li>
    <li id="item36" draggable="true">24</li>
    <li id="item37" draggable="true">25</li>
    <li id="item38" draggable="true">26</li>
    <li id="item39" draggable="true">27</li>
    <li id="item40" draggable="true">28</li>
    <li id="item41" draggable="true">29</li>
    <li id="item42" draggable="true">30</li>
    <li id="item43" draggable="true">31</li>
    <li id="item44" draggable="true">32</li>
    <li id="item45" draggable="true">33</li>
    <li id="item46" draggable="true">34</li>
    <li id="item47" draggable="true">35</li>
    <li id="item48" draggable="true">36</li>
    <li id="item49" draggable="true">37</li>
    <li id="item50" draggable="true">38</li>
    <li id="item51" draggable="true">39</li>
    <li id="item52" draggable="true">40</li>
    <li id="item53" draggable="true">41</li>
    <li id="item54" draggable="true">42</li>
    <li id="item55" draggable="true">43</li>
    <li id="item56" draggable="true">44</li>
    <li id="item57" draggable="true">45</li>
    <li id="item58" draggable="true">46</li>
    <li id="item59" draggable="true">47</li>
    <li id="item60" draggable="true">48</li>
  </ul>


</article>


<footer>
  Copyright © Aceuk007.com
</footer>

Hi i have a problem when some dragged items have been dropped, I get this effect (see pic). display I think it might be something to do with (negative)-margins but I don't know how to solve it. This only has to work on IE.

My CSS

article {
  background-color: aqua;
  height: 395px;
  padding: 5px;
}

ul {
  margin: left;
  column-count: 6;
  column-gap: 20px;
  column-width: auto;
  text-align: left;
}

li {
  list-style-type: none;
  padding: 5px;
  margin: 2px;
  background-color: #CCCCFF;
  border: 2px double #CCCCCC;
}

Here is a jsfiddle incorrect display

Answer 1

Use break-inside: avoid-column on li, like so:

li {
  break-inside: avoid-column;
  list-style-type: none;
  padding: 5px;
  margin: 2px;
  background-color: #CCCCFF;
  border: 2px double #CCCCCC;
}

fixed jsfiddle: https://jsfiddle.net/3jv06kcw/1/

Note: this CSS property is supported only in IE as of Dec 2015 (which, according to the question, is fine). For webkit, you can use: -webkit-column-break-inside: avoid; instead. However, the resulting content distribution may be slightly different among browsers. I'm guessing unresolved stuff like this is the reason why multicolumn is still behind vendor prefixes in many cases.