title: Can I Make a JQuery UI Layout Centered in a Column
body: <p>I am new to JQuery UI and I have gotten the basic example working where the layout goes all the way to the edge of the page. What I'd like is this layout, but where the content is in a centered column, and you can see the background color on each side. So I added a div to the outside with some very simple CSS, like so:</p>
  
  <pre><code>.frame
  {
     width:900px; 
     margin:0 auto;
  }
  
  &lt;div class="frame"&gt;
      &lt;div class="ui-layout-north"&gt;
      &lt;/div&gt;
      &lt;div class="ui-layout-center"&gt;
      &lt;/div&gt;
      &lt;div class="ui-layout-east"&gt;
      &lt;/div&gt;
      &lt;div class="ui-layout-west"&gt;
      &lt;/div&gt;
      &lt;div class="ui-layout-south"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Alas, instead of working like a normal div, I get a pop-up that says:</p>
  
  <blockquote>
    <p>UI Layout Initialization Error</p>
    
    <p>The center-pane element does not exist.</p>
    
    <p>The center-pane is a required element</p>
  </blockquote>
  
  <p>Why does it do that, and how can I fix it?</p>
  
  <p>Thanks in advance, and keep in mind, I may be making a very noobish error. :)</p>