title: Resizable split screen divs using jquery UI
body: <p>I have a design in mind that involves a split panel view in html, similar to a winforms split panel.  I've been expirimenting with <a href="http://jqueryui.com/demos/resizable">jQuery UI - Resizable</a> and I like the function, I just can't seem to co-ordinate the resizing of the two <code>div</code>s.  The problem with the current code is that the two <code>div</code>s resize away from each other, not with one following the other.  How can I make the two <code>div</code>s work together?</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Test&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/custom.css" /&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen"&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.10.custom.css" media="screen"&gt;
          &lt;script type="text/javascript" src="script/jquery-1.5.1.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="script/superfish.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="script/jquery-ui-1.8.10.custom.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
  
  
          // initialise plugins
          $(function(){
              try {
                  $('ul.sf-menu').superfish();
  
                  //set up divs
                  $('#Content').resizable({ handles: 'e', alsoResize: $('#Attributes')});
  
              }catch(ex){
                  alert(ex.message);
              }
          });
  
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
         &lt;div id="Header"&gt;
              &lt;div id="Menu"&gt;
                  &lt;ul class="sf-menu" id="nav"&gt;
                      &lt;!-- Snip menu --&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="Middle"&gt;
              &lt;div id="Content" class="ui-widget-content"&gt;This is where the view is.&lt;br/&gt;
              Imagine an image here ...
              &lt;br/&gt;
              &lt;br/&gt;
              &lt;br/&gt;
              &lt;/div&gt;
              &lt;div id="Attributes" class="ui-widget-content"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;A&lt;/li&gt;
                      &lt;li&gt;B&lt;/li&gt;
                      &lt;li&gt;C&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="FootBreak"/&gt;
          &lt;div id="Footer"&gt;
              &lt;a href="#"&gt;Help&lt;/a&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>