jQuery Layout

Reference: http://layout.jquery-dev.net/

HTML

<script src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<div id="content">
    <div class="ui-layout-west"></div>
    <div class="ui-layout-center">

    </div>
          <div clss="ui-layout-north">
      
      </div>
</div>

CSS

#content {
    height:400px;
}

JavaScript

jQuery(document).ready(function () {
    jQuery("#grid").jqGrid('setGridWidth',$myLayout.state.center.innerWidth, 'true');
});




$("#grid").jqGrid({
    datatype: "local",
    height: 330,
    colNames: ['Key', 'Value'],
    colModel: [{
        name: 'Key',
        index: 'Key'
    }, {
        name: 'Value',
        index: 'Value'
    }]
});

/*$('#content').layout({
    applyDefaultStyles: true
});
*/

$('#content').layout({
  center: {
    resizable: true,
    onresize: resize,
    triggerEventsOnLoad: true 
  },
  applyDefaultStyles: true
});

function resize(pane, $Pane, paneState) {
    jQuery("#grid").jqGrid('setGridWidth',paneState.innerWidth - 2, 'true');
};