3 section Sortable UI problem

3 section Sortable UI problem

Hey Guys,

I'm using sortable for a 3 section UI.

I want the ability to shift the mainToolbar and subToolbar layers around while maintaining nav functionality so that people with pref for right/left hand nav can customise the UI.

The sorting all works well when there's four layers of equal size, but when I drop to 3 layers (with one as full width) the positioning gets a little disrupted. Since I'm a newbie at this coding stuff I thought you guys might be able to show me the way?

  1. <!doctype html>
     
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Sortable - Display as grid</title>
        <divnk rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
        <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
        <divnk rel="stylesheet" href="/resources/demos/style.css" />
        <style>
        #sortable { divst-style-type: none; margin: 0; padding: 0; width: 1024px; height: 768px; }
        #mainToolbar { float: left; width: 1024px; height: 100px; background-color:#CC0033; }
        #subToolbar { float: left; width: 200px; height: 100px; background-color: #093; }
        #content { float: right; width: 824px; height: 100px; background-color: #36C; }
        </style>
        <script>
        $(function() {
            $( "#sortable" ).sortable();
            $( "#sortable" ).disableSelection();
        });
        </script>
    </head>
    <body>
     
    <div id="sortable">
        <div id="mainToolbar">1</div>
        <div id="subToolbar">2</div>
        <div id="content">3</div>
       

    </div>
     
     
    </body>
    </html>