title: Want to auto-resize jQuery UI.Layout's div width and height when resize the container of them using JQuery UI resizable!
body: <p>I am going to using <a href="http://layout.jquery-dev.net/index.cfm" rel="nofollow">jQuery UI.Layout Plug-in</a> with <strong>JQuery UI resizable</strong> plugin.</p>
  
  <p><a href="http://layout.jquery-dev.net/demos/container_centered.html" rel="nofollow">the container layout example of JQuery UI layout plugin:</a></p>
  
  <p>My code struct like this:</p>
  
  <p>html code:</p>
  
  <pre><code>&lt;div id="container"&gt;
  
      &lt;div id="paddingWrapper" class="pane ui-layout-center"&gt;
  
          &lt;div class="pane ui-layout-center"&gt;
  
              Center
  
              &lt;p&gt;&lt;a href="http://layout.jquery-dev.net/demos.html"&gt;&lt;b&gt;Go to the Demos page&lt;/b&gt;&lt;/a&gt;&lt;/p&gt;
  
          &lt;/div&gt;
  
          &lt;div class="pane ui-layout-north"&gt;North&lt;/div&gt;
  
          &lt;div class="pane ui-layout-south"&gt;South&lt;/div&gt;
  
          &lt;div class="pane ui-layout-east"&gt;East&lt;/div&gt;
  
          &lt;div class="pane ui-layout-west"&gt;West&lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>and the <strong>div id="container"</strong> will be attached with <strong>jquery ui resizable plugin</strong> and <strong>jquery ui draggable plugin</strong>.</p>
  
  <p>the code attach layout Ui plugin:</p>
  
  <pre><code>$(document).ready(function () {
  
      $('#container').layout();
  
  });
  </code></pre>
  
  <p>But it seems when I resize the <strong>div id="container"</strong>,the layout was broken.the <strong>inner contents</strong> also <strong>preserve original with and height</strong>.So, I need a way to make the layout of inner could auto resize when I resize the container of them.</p>
  
  <p>Thank you very much!!</p>