Anonymous

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout Demo</title>

<script type="text/javascript">
	var djConfig = {isDebug: true};
	//djConfig.debugAtAllCosts = true;
</script>
<script type="text/javascript" src="../../dojo.js"></script>
<script language="JavaScript" type="text/javascript">
	dojo.require("dojo.widget.LayoutContainer");
	dojo.require("dojo.widget.ContentPane");
	dojo.require("dojo.widget.LinkPane");
	dojo.require("dojo.widget.SplitContainer");
	dojo.require("dojo.widget.ColorPalette");
	dojo.require("dojo.widget.TabContainer");
	dojo.require("dojo.widget.Tree");
	dojo.hostenv.writeIncludes();
</script>
  <style>
    html, body{	
		width: 100%;	/* make the body expand to fill the visible window */
		height: 100%;
		overflow: hidden;	/* erase window level scrollbars */
		padding: 0 0 0 0;
		margin: 0 0 0 0;
    }
	.dojoSplitPane{
		margin: 5px;
	}
	#rightPane {
		margin: 0;
	}
   </style>
</head>
<body>

<div id="LayoutContainer" style="width:100%;height:100%;">
								
								<div id="SplitHeaderFooter" style="width:100%;height:100%;">

									
									<div id="Header">
										
										<div id="HeaderItems">
											<div>
												<strong>Header</strong> <br />
												<a id="panel_0" onclick="CPanelSettings.showSettingsPanel('PanelSettings_PanelSettings', 'PanelSettings_TabContainer', 'PanelSettings_FormatHeader');" href="javascript:;">Settings</a>

											</div>
										</div>

										
									</div>
									
									<div id="BodySplitter">
										
										<div id="LeftColumn" style="width:100px;">
											
											<div id="LeftColumnItems">
												<div>
													<strong>Left Column</strong> <br />

													<a id="panel_1" onclick="CPanelSettings.showSettingsPanel('PanelSettings_PanelSettings', 'PanelSettings_TabContainer', 'PanelSettings_FormatLeftColumn');" href="javascript:;">Settings</a>

												</div>
											</div>
											
										</div>
										
										<div id="Body" style="width:0;">
											
											<div id="BodyItems">
												<div>
													<strong>Body</strong> <br />

													<a id="panel_2" onclick="CPanelSettings.showSettingsPanel('PanelSettings_PanelSettings', 'PanelSettings_TabContainer', 'PanelSettings_FormatBody');" href="javascript:;">Settings</a>

													<!--
														<p>This area will be stretched to touch the left and right column by default.</p>
													-->
												</div>
											</div>
											
										</div>
									
										<div id="RightColumn" style="width:100px;">
											
											<div id="RightColumnItems">
												<div>

													<strong>Right Column</strong> <br />

													<a id="panel_3" onclick="CPanelSettings.showSettingsPanel('PanelSettings_PanelSettings', 'PanelSettings_TabContainer', 'PanelSettings_FormatRightColumn');" href="javascript:;">Settings</a>
												</div>
											</div>
											
										</div>
										
									</div>
									
									<div id="Footer" style="height:50px;">

										
										<div id="FooterItems">
											<div>

												<strong>Footer</strong> <br />
												<a id="panel_4" onclick="CPanelSettings.showSettingsPanel('PanelSettings_PanelSettings', 'PanelSettings_TabContainer', 'PanelSettings_FormatFooter');" href="javascript:;">Settings</a>
											</div>
										</div>
										
									</div>

									
									
								</div>
								
								
							</div>
<script type="text/javascript">
/*<![CDATA[*/
var LayoutContainer=dojo.widget.createWidget('LayoutContainer', {'layoutChildPriority':'top-bottom','widgetId':'LayoutContainer'}, dojo.byId('LayoutContainer'));
var SplitHeaderFooter=dojo.widget.createWidget('SplitContainer', {'persist':false,'sizerWidth':3,'sizingSplitter':2,'orientation':'vertical','widgetId':'SplitHeaderFooter'}, dojo.byId('SplitHeaderFooter'));
var Header=dojo.widget.createWidget('ContentPane', {'layoutAlign':'top','sizeMin':20,'sizeShare':50,'widgetId':'Header'}, dojo.byId('Header'));
var BodySplitter=dojo.widget.createWidget('SplitContainer', {'persist':false,'sizerWidth':3,'sizingSplitter':2,'orientation':'horizontal','widgetId':'BodySplitter'}, dojo.byId('BodySplitter'));
var LeftColumn=dojo.widget.createWidget('ContentPane', {'sizeMin':100,'sizeShare':50,'widgetId':'LeftColumn'}, dojo.byId('LeftColumn'));
var Body=dojo.widget.createWidget('ContentPane', {'sizeMin':100,'sizeShare':50,'widgetId':'Body'}, dojo.byId('Body'));
var RightColumn=dojo.widget.createWidget('ContentPane', {'sizeMin':100,'sizeShare':50,'widgetId':'RightColumn'}, dojo.byId('RightColumn'));
var Footer=dojo.widget.createWidget('ContentPane', {'layoutAlign':'bottom','sizeMin':20,'sizeShare':50,'widgetId':'Footer'}, dojo.byId('Footer'));

LayoutContainer.addChild(SplitHeaderFooter);
SplitHeaderFooter.addChild(Header);
SplitHeaderFooter.addChild(BodySplitter);
BodySplitter.addChild(LeftColumn);
BodySplitter.addChild(Body);
BodySplitter.addChild(RightColumn);
SplitHeaderFooter.addChild(Footer);

/*]]>*/
</script>
</body>
</html>