Nested Layouts

If 6 panels are not enough for you, you can create nested layouts by assigning a layout to a panel. There is no limit how deep you can go, but be reasonable :). In the example below the nested layout is yellow.
Main:
Nested: $(function () { var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;'; $('#layout').w2layout({ name: 'layout', panels: [ { type: 'top', size: 50, resizable: true, style: pstyle, content: 'top' }, { type: 'left', size: 200, resizable: true, style: pstyle, content: 'left' }, { type: 'main', style: 'background-color: white;', overflow: 'hidden' }, { type: 'preview', size: '50%', resizable: true, hidden: true, style: pstyle, content: 'preview' }, { type: 'right', size: 200, resizable: true, style: pstyle, content: 'right' }, { type: 'bottom', size: 50, resizable: true, hidden: true, style: pstyle, content: 'bottom' } ] }); var pstyle = 'background-color: #F0F0C1; border: 1px solid #dfdfdf; padding: 5px;'; $().w2layout({ name: 'layout2', panels: [ { type: 'top', size: 40, resizable: true, style: pstyle, content: 'top' }, { type: 'left', size: 80, resizable: true, style: pstyle, content: 'left' }, { type: 'main', style: pstyle }, { type: 'preview', size: '50%', resizable: true, hidden: true, style: pstyle, content: 'preview' }, { type: 'right', size: 80, resizable: true, style: pstyle, content: 'right' }, { type: 'bottom', size: 40, resizable: true, hidden: true, style: pstyle, content: 'bottom' } ] }); w2ui['layout'].content('main', w2ui['layout2']); });