YUI layout manager

Yesterday I discovered the YUI layout manager. It is a javascript solutions dividing your browser viewport into up to 5 parts (top, bottom, left, right and center). If you ask, why should I use that thing and not rely on div/css. Here are some advantages I can immediately see here:

1. It is super easy to produce the basic layout you like in <>
2. You get cool js effects like resizing, toggling, etc.
3. You can be sure that the layout works in every browser (YUI is reliable in this).
4. It looks super cool and is skinnable via CSS.

Here is what you have to do:

Include the following resources:

<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.0r4/build/utilities/utilities.js&2.8.0r4/build/container/container-min.js&2.8.0r4/build/resize/resize-min.js&2.8.0r4/build/layout/layout-min.js&2.8.0r4/build/menu/menu-min.js"/>

Include the following script:

<script type="text/javascript">
YAHOO.util.Event.onDOMReady(function() {
var layout = new YAHOO.widget.Layout({
units: [
{ position: 'top', height: 28, body: 'top1' },
{ position: 'right', header: 'Right', width: 300, resize: false, collapse: true, scroll: true, body: 'right1', animate: true, gutter: '5' },
{ position: 'bottom', height: 28, body: 'bottom1' },
{ position: 'left', header: 'Left', width: 200, body: 'left1', gutter: '5', resize: true, scroll: true, animate:true, collapse:true},
{ position: 'center', body: 'center1', gutter: '5 0', scroll: true }
]
});

layout.render();
});
</script>

The options are self-explaining and make the whole thing easy to configure. You can even nest layouts like in the attached screenshot.