Nested Layout

<div data-ax5layout="ax1" data-config="{layout:"dock-panel"}" style="height: 800px;border:1px solid #ccc;">
    <div data-dock-panel="{dock:"top", split:true, height: 100, maxHeight: 300}" style="text-align: center;"><h4>TOP</h4></div>
    <div data-dock-panel="{dock:"bottom", split:"true", height: 100, minHeight: 10, maxHeight: 300}" style="text-align: center;"><h4>BOTTOM</h4></div>
    <div data-dock-panel="{dock:"left", split:true, width: 200, minWidth: 10, maxWidth: 300}"><h4>LEFT</h4></div>
    <div data-dock-panel="{dock:"right", split:true, width: 200, minWidth: 10, maxWidth: 300}"><h4>RIGHT</h4></div>
    <div data-dock-panel="{dock:"center"}" style="padding: 5px;text-align: center;">

        <div data-ax5layout="ax1" data-config="{layout:"split-panel", orientation: "vertical"}" style="height: 100%;border:1px solid #ccc;">
            <div data-split-panel="{width: "300", minWidth:50}"></div>
            <div data-splitter="{}"></div>
            <div data-split-panel="{width: "*"}">
                <h4>Panel</h4>
            </div>
            <div data-splitter="{}"></div>
            <div data-split-panel="{width: "200", minWidth: 50, maxWidth: 300}"></div>
        </div>

    </div>
</div>

<script type="text/javascript">
    $(document.body).ready(function () {
        $('[data-ax5layout]').ax5layout();
    });
</script>