Create Nested Layers Jquery-Layout

Question

I am trying to created nested layers. I want there to be two columns (west and east) inside of my center layer. I know it seems like I could just split and do west and east columns instead of center, but I need to do more on this page later that requires the nested layers.

I have used jquery-layout, but havent nested before.

Here is what I have so far.

EDIT:

I changed it so now I am trying to a north south east and west inside of the center. This is easier to understand then just splitting center in 2.

http://jsfiddle.net/dan_vitch/gD97N/1/

Answer 1

I got this to work in VS, but jfiddle doesnt like it:

html:

<div class="ui-layout-north master-header">
    <h1>header</h1>
</div>
<div class="ui-layout-center" id="mainContent">
    <div class="ui-layout-north"> Inner - North</div>
    <div class="ui-layout-south"> Inner - South</div>
    <div class="ui-layout-west">  Inner - West</div>
</div>
<div class="ui-layout-south master-footer">
    <h1>footer</h1>
</div>

jquery:

$(document).ready(function(){
    outLayout = $('body').layout({
        defaults: {
           applyDefaultStyles: true
        }
    });

    innerLayout = $("#mainContent").layout({
        defaults: {
            applyDefaultStyles: true
        },
        center: {
            paneSelector:"#mainContent"
        }
    });
});