title: A full page layout with resizable panes using jQuery UI
body: <p>I'm trying to create the overall layout of a webapp. The app is full-screen and has a fixed header and three columns/panes. The center pane consists of two rows:</p>
  
  <p><img src="https://i.stack.imgur.com/rgEQu.png" alt="app wireframe layout"></p>
  
  <p>The panes should be resizable through dragging the pane edges with the mouse (see arrows in image above).</p>
  
  <p>The individual panes have should have vertical scrollbars in case of overflowing content, that is, no global browser window scrollbar.</p>
  
  <p>Using jQuery and jQuery UI Resizable, I've created <a href="http://jsfiddle.net/agib/Y2Xfg/embedded/result/">this (partly working) <strong>JSFiddle</strong></a>.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="header"&gt;
    Fixed header    
  &lt;/div&gt;
  &lt;div class="wrapper"&gt;
     &lt;div class="inner-wrapper"&gt;
         &lt;div class="left pane"&gt;Left&lt;/div&gt;
         &lt;div class="center pane"&gt;
             &lt;div class="inner"&gt;
                 &lt;div class="top"&gt;Center top&lt;/div&gt;
                 &lt;div class="bottom"&gt;Center bottom&lt;/div&gt;
             &lt;/div&gt;
         &lt;/div&gt;
         &lt;div class="right pane"&gt;Right&lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>html, body {
      height: 100%;
  }
  .header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 20px;
      background-color: moccasin;  
  }
  .wrapper {
      position:absolute;
      top: 21px;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: fuchsia;
  }
  .inner-wrapper,
  .center.pane .inner {
      display: table;
      width: 100%;
      height: 100%;
  }
  .pane {
      display: table-cell;
  }
  .left.pane {
     background-color: olivedrab; 
  }
  .center.pane {
      background-color: lightblue;
  }
  .center.pane .inner .top,
  .center.pane .inner .bottom{
      display: table-row;  
  }
  .center.pane .inner .top {
      background-color: lightcoral;   
  }
  .center.pane .inner .bottom {   
      background-color: orange;
      height: 100%;
      width: 100%;
  }
  .right.pane {
      background-color: #999;
  }
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>$(function () {
      $(".left.pane").resizable({
          handles: "e, w"
      });
      $(".right.pane").resizable({
          handles: "e, w"
      });
      $(".center.pane .inner .bottom").resizable({
          handles: "n, s"
      });
  });
  </code></pre>
  
  <p>It has several issues, including:</p>
  
  <ul>
  <li>When resizing Left, Right is also resized (which it shouldn't)</li>
  <li>When resizing Left towards full width, Center content is hidden under Right</li>
  <li>When resizing Right the wrapper (Fuchsia-colored) is partly visible</li>
  <li>Center bottom is resized through the top of the Center top, not through it's own top</li>
  </ul>
  
  <p>I'm aware of the jQuery Layout plugin, but as far as I can see, it doesn't offer quite the layout I'm after. Also, I want to keep it as simple as possible.</p>
  
  <p>Furthermore, I have tried Methvins splitter plugin, but couldn't get it to work.</p>
  
  <p>My question:</p>
  
  <p><strong>Any suggestions for how to create a layout as in the image from jQuery UI Resizable and what I have in the <a href="http://jsfiddle.net/agib/Y2Xfg/embedded/result/">JSFiddle</a>?</strong></p>