jquery.ui.layout sample

HTML

<script src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>
<div class="top">
<DIV class="ui-layout-center">Center
    <P><A href="http://layout.jquery-dev.net/demos.html">Go to the Demos page</A></P>
    <P>* Pane-resizing is disabled because ui.draggable.js is not linked</P>
    <P>* Pane-animation is disabled because ui.effects.js is not linked</P>
</DIV>
<DIV class="ui-layout-north">North</DIV>
<DIV class="ui-layout-south">South</DIV>
<DIV class="ui-layout-east">East</DIV>
<DIV class="ui-layout-west">West</DIV>
</div>

CSS

html, body, .top {
    height: 100%;
    width: 100%;
}
body {
    position: relative;
}

JavaScript

$(".top").layout({
    'north': {
            'size': 46
        },
        'south': {
            'size': 220
        },
        'east': {
            'size': 464
        }
});