Splitlayout is is used to divide its content into two divisions horizontally or vertically. It also allows you to adjust each division's size by dragging a splitter.

<zk>
	<style src="/widgets/layout/split_layout/splitlayout-demo.css" />
	<tabbox>
		<tabs>
			<tab label="Simple"/>
			<tab label="Event"/>
			<tab label="Combined"/>
			<tab label="Minimal Height"/>
			<tab label="Customized Splitter"/>
		</tabs>
		<tabpanels>
			<tabpanel height="600px">
				<apply templateURI="/widgets/layout/split_layout/simple.zul"/>
			</tabpanel>
			<tabpanel height="600px">
				<apply templateURI="/widgets/layout/split_layout/event.zul"/>
			</tabpanel>
			<tabpanel height="600px">
				<apply templateURI="/widgets/layout/split_layout/combined.zul"/>
			</tabpanel>
			<tabpanel height="600px">
				<apply templateURI="/widgets/layout/split_layout/minHeight.zul"/>
			</tabpanel>
			<tabpanel>
				<apply templateURI="/widgets/layout/split_layout/customize.zul"/>
			</tabpanel>
		</tabpanels>

	</tabbox>
</zk>

<zk>

	<splitlayout  vflex="1" hflex="1" >
		<div sclass="area" vflex="1">
			<label value="Area 1"/>
		</div>
		<div sclass="area" vflex="2">
			<label value="Area 2"/>
		</div>
	</splitlayout>
</zk>

<zk>
	<splitlayout  vflex="1" hflex="1" collapse="before"
	onDivisionSize='Clients.showNotification("divisions size: " + event.getSizes());'
	onOpen='Clients.showNotification("Area 1 open is "+event.isOpen())'>
		<div id="a1" sclass="area" vflex="1">
			<label value="Area 1: can be collapsed" sclass="center" />
		</div>
		<div sclass="area" vflex="1">
			<label value="Area 2" sclass="center" />
		</div>
	</splitlayout>
</zk>

<zk>
	<splitlayout  vflex="1" hflex="1">
		<div sclass="area" hflex="1" vflex="1">
			<label value="Area 1"/>
		</div>
		<splitlayout vflex="1" hflex="1" orient="horizontal" >
			<div sclass="area" vflex="1" hflex="1">
				<label value="Area 2"/>
			</div>
			<div sclass="area" vflex="1"  hflex="2">
				<label value="Area 3"/>
			</div>
		</splitlayout>
	</splitlayout>
</zk>

<zk>
	<splitlayout id="layout" vflex="1" hflex="1" minHeights="200px, 300px">
		<div sclass="area" vflex="1" >
			<label value="Area 1: minimal height 200px" sclass="center" />
		</div>
		<div sclass="area" vflex="1">
			<label value="Area 2:  minimal height 300px" sclass="center" />
		</div>
	</splitlayout>
</zk>

<zk>
<style>
	.example {
		margin-left: auto;
		margin-right: auto;
		margin-top: 30px;
	}
	.background .z-splitlayout-splitter-vertical{
		background: gold;
	}
	.thin-splitter .z-splitlayout-splitter-vertical{
		height: 2px;
	}
	.dark .z-splitlayout-splitter-vertical{
		background: #073463;
		border: 3px solid #608dbb;
		width: 60% !important;
		height: 12px;
		max-height: 12px;
		margin: auto;
		border-radius: 3px;
	}
</style>
<div width="600px" height="200px" sclass="example">
	<splitlayout  vflex="1" hflex="1" sclass="background">
		<div sclass="area" vflex="1">
			<label value="Area 1" sclass="center" />
		</div>
		<div sclass="area" vflex="1">
			<label value="Area 2" sclass="center" />
		</div>
	</splitlayout>
</div>
<div width="600px" height="200px" sclass="example">
	<splitlayout  vflex="1" hflex="1" sclass="thin-splitter">
		<div sclass="area" vflex="1">
			<label value="Area 1" sclass="center" />
		</div>
		<div sclass="area" vflex="1">
			<label value="Area 2" sclass="center" />
		</div>
	</splitlayout>
</div>
<div width="600px" height="200px" sclass="example">
	<splitlayout  vflex="1" hflex="1" sclass="dark" >
		<div sclass="area" vflex="1">
			<label value="Area 1" sclass="center" />
		</div>
		<div sclass="area" vflex="1">
			<label value="Area 2" sclass="center" />
		</div>
	</splitlayout>
</div>
</zk>