<!doctype html>
<html>
<head>
	<meta name="viewport"
		  content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<title>Linear Layout - 5 regions</title>

	<link rel="stylesheet" href="../../delite/themes/defaultapp.css">

	<!-- For testing purposes.  Real applications should load the AMD loader directly -->
	<script type="text/javascript" src="../../delite/tests/boilerplate.js"></script>

	<style>
		.d-linear-layout div {
			border: solid 1px;
		}
	</style>
	<script type="text/javascript">
		require([
			"delite/register",
			"deliteful/LinearLayout",
			"dojo/domReady!"
		], function(register){
			register.parse();
		});
	</script>
</head>
<body>
<!-- This sample demonstrates how to mix:
		- fixed-sized elements,
		- percentage-sized elements,
		- no size constraints (natural size) elements,
		- and elements that fill remaining space (class="fill")
-->
<d-linear-layout vertical="false" style="width:100%; height: 100%">
	<div style="width:30%">LEFT (width: 30%)</div>
	<d-linear-layout style="width: 100%; height: 100%">
		<div style="height: 30%">TOP (height: 30%)</div>
		<div class="fill">CENTER (Fill available space)</div>
		<div>BOTTOM (no size constraint)</div>
	</d-linear-layout>
	<div>RIGHT (no size constraint)</div>
</d-linear-layout>
</body>
</html>

Add a 5-regions nested LinearLayout sample with different size constraints.
Add a 5-regions nested LinearLayout sample with different size constraints.
