jQuery Layout Bootstrap

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

by ramesh valasa

HTML

<script src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>

<div id="container">
    
    <div class="ui-layout-west">
        <pre>East</pre>
    </div>
     <div class="ui-layout-center">
        <pre>Center</pre>
    </div>
</div>

CSS

html, body {
    width:      100%;
    height:     100%;                    
}
#container {
    height:     100%;
    width:      100%;
    overflow:   none;
}
.ui-layout-pane { /* all 'panes' */
    padding:    0px; 
    overflow:    auto;
    /* DO NOT add scrolling (or padding) to 'panes' that have a content-div,
       otherwise you may get double-scrollbars - on the pane AND on the content-div
       - use ui-layout-wrapper class if pane has a content-div
       - use ui-layout-container if pane has an inner-layout
    */
    }
    /* (scrolling) content-div inside pane allows for fixed header(s) and/or footer(s) */
    .ui-layout-content {
        position:    relative; /* contain floated or positioned elements */
        overflow:    auto; /* add scrolling to content-div */
    }

/*
 *    UTILITY CLASSES
 *    Must come AFTER pane-class above so will override
 *    These classes are NOT auto-generated and are NOT used by Layout
 */
.layout-child-container,
.layout-content-container {
    padding:    0;
    overflow:    hidden;
}
.layout-child-container {
    border:        0; /* remove border because inner-layout-panes probably have borders */
}
.layout-scroll {
    overflow:    auto;
}
.layout-hide {
    display:    none;
}
.ui-layout-resizer    { /* all 'resizer-bars' */
    background:        #DDD;
    border:            1px solid #BBB;
    border-width:    0;
    }
    .ui-layout-resizer-drag {        /* REAL resizer while resize in progress */
    }
    .ui-layout-resizer-hover    {    /* affects both open and closed states */
    }
    /* NOTE: It looks best when 'hover' and 'dragging' are set to the same color,
        otherwise color shifts while dragging when bar can't keep up with mouse */
    .ui-layout-resizer-open-hover ,    /* hover-color to 'resize' */
    .ui-layout-resizer-dragging {    /* resizer beging 'dragging' */
        background: #C4E1A4;
    }
    .ui-layout-resizer-dragging {    /* CLONED resizer being dragged */
        border:...

JavaScript

$(document).ready(function () {
    $('#container').layout();
});