Test Case Boilerplate

Fork this way...

HTML

<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<div class="master">
    <div class="container sortable_area">
        <div class="column sortable sortable_area">
            <div class="sortable s1"></div>
            <div class="sortable s1"></div>
            <div class="sortable s1"></div>
             <div class="sortable s1"></div>
            <div class="sortable s1"></div>
            <div class="sortable s1"></div>
        </div>
        <div class="column c2 sortable sortable_area">
            <div class="sortable s1 sub2"></div>
            <div class="sortable s1 sub2"></div>
            <div class="sortable s1 sub2"></div>
            <div class="sortable s1 sub2"></div>
            <div class="sortable s1 sub2"></div>
            <div class="sortable s1 sub2"></div>
            <div class="sortable s1 sub2"></div>
        </div>
        <div style="clear: both;"></div>
    </div>
    <div class="toolbox">
        <div class="help">Need to stop sortable when dragging over this area.</div>
      
    </div>
</div>

CSS

.container{
    outline: 1px dashed orange;
    margin-bottom: 251px;
}
.column{
    width: 50%; 
    float: left; 
    margin: 2%;
    outline: 1px dashed #35eafd;
    padding: 2%;
}

.column.c2{
    width: 30%;
}

.s1{
    /* 
    This float is the problem!   
    Try it with an without...        
    */
    float: left;
    
    width: 100%;
    height: 150px;
    background: #f1fcfd;
    outline: 1px solid #35eafd;   
    margin-bottom: 10px;
}
.sub2{ 
    outline: 1px solid #ffbe9b;   
    background: #fff7f3;
}

.placeholder{
    background:#f2fdf1;
}

body{
    position: relative;
}

.toolbox {
    position: fixed;
    bottom: 0; 
    width: 100%; 
    height: 250px;
    background: #fff; 
    z-index: 500;
    border-top: 1px solid #aaa;
    text-align: center; 
    
}

.toolbox .help{
    padding: 25px;
    font-family: helvetica, arial; 
    font-size: 20px;
    color: #ccc;
}

JavaScript

jQuery('.sortable_area').sortable({
                items: ".sortable",
                dropOnEmpty: true,
                forcePlaceholderSize: true,
                forceHelperSize: false,
                connectWith: ".column",
                scrollSensitivity: 200,
                scrollSpeed: 40,
                placeholder: "placeholder",
                cursor: "move",
                distance: 0.5,
                delay: 100,
                opacity: 0.6,
                tolerance: "pointer",
   				containment: '.container'
                
                
});