### Layout Overview

The w2layout object allows you to create stretchable and resizable layouts with up to 6 panels. The panels are top, left, main, preview, right, and bottom. By default all of the panels are created, but only the ones you define will be visible. The main panel of the layout is always visible.

#### Example

<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.4.min.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.4.min.js"></script> </head> <body> <div id="myLayout" style="height: 400px"></div> </body> <script> $(function () { $('#myLayout').w2layout({ name: 'myLayout', panels: [ { type: 'top', size: 60 }, { type: 'left', size: 150, resizable: true }, { type: 'right', size: 150, resizable: true } ] }); }); </script> </html> It is easy to add and remove content to the panels. You can display HTML or other objects. The w2layout object will add a listener to the window resize event and will automatically resize the panels based on the width and height of its box. w2ui.myLayout.show('right');