Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
  <script type="text/javascript">
    $("#mainSortingContainer").sortable();
    </script>
    <title>test site</title>
    <style>
        
        .float1 {
            width: 48%;
            background-color: #CDFECD;
            padding: 3px;
        }
    
        .blank {
            background-color: #2B65EC;
            width: 100px;
            height: 20px;
        }
      
        .sorting_item {
            height:100px;
        }
    </style>
    
</head>
​
<body>
​
    <ul id="mainSortingContainer">
    
        <li class="sorting_item">
            <div >float element 1</div>
            <div >float element 1</div>
        </li>
        <li class="sorting_item">
            <div >float element 2</div>
            <div >float element 2</div>
        </li>
        <li class="sorting_item">
            <div >float element 3</div>
            <div >float element 3</div>
        </li>
        
        <div style="clear:both;"></div>
    </ul>
        
</body>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers