jquery sortable not working well with li widths

jquery sortable not working well with li widths

I can use jquery to sort an individual list and sort between lists. However when I attempt to do both, the individual sort works really poorly. (Seemingly can only find room at the end) It seems has to do with specifying the width of the li. Any ideas. Thanks all - ive been struggling for too long. Website its located at is :  http://s95311055.onlinehome.us/midwives2012/sortFields-test.php


  1. <script>
    $(function() {
         $( "#category1, #category2, #category3,#removed" ).sortable({items: "li:not(.ui-state-disabled)"}).disableSelection();

    });
    $(function() {
         $('.category').sortable({ connectWith: $('.category')});
    });
    </script>


    <style type="text/css">

    .category{
        background-color: #666;
        float:left;
        width: 100%;
    }

    .categoryHeader{
        font-size: 16px;
        background-color: #F00;
        width: 100%;
    }

    ._32 {
        width: 28%;
        display: inline;
        float: left;
        padding-left: 2%;
        padding-right: 2%;
        padding-bottom: 2%;
        background-color: #FFC;
        border: 1px dotted #036;
    }

    </style>
    </head>
    <body>

                
                

       
              <ul class="category" id="category1"><span class="categoryHeader">List1<br></span>
          <li class="_32">num1</li>   
          <li class="_32">num2</li>   
          <li class="_32">num3</li>   
          <li class="_32">num4</li>   
          <li class="_32">num5</li>   
          <li class="_32">num6</li>                                 
          <li class="_32">num7</li>   
          <li class="_32">num8</li>   
          <li class="_32">num9</li>   
          <li class="_32">num10</li>   
          <li class="_32">num11</li>   
          <li class="_32">num12</li>       
        </ul>
        <ul class="category" id="category2"><span class="categoryHeader">List2<br></span>
          <li class="_32">num21</li>   
          <li class="_32">num22</li>   
          <li class="_32">num23</li>   
          <li class="_32">num24</li>   
          <li class="_32">num25</li>   
          <li class="_32">num26</li>                                 
          <li class="_32">num27</li>   
          <li class="_32">num28</li>   
          <li class="_32">num29</li>   
          <li class="_32">num30</li>   
          <li class="_32">num31</li>   
          <li class="_32">num32</li>       
                             
        </ul>