Column layout divides its container space into individual columns called "columnchildren". The columnchildren take only the ZK panel components as children components; the panels serve as the container for your content.

<div apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('demo.layout.column_layout.ColumnLayoutViewModel')">
	<columnlayout height="350px">
		<columnchildren width="50%">
			<panel title="Available projects:" border="normal" height="100%">
				<panelchildren>
					<listbox id="left" height="100%" oddRowSclass=" " checkmark="true"
							 model="@init(vm.leftListModel)">
						<template name="model">
							<listitem label="@load(each.label)" image="@load(each.image)" />
						</template>
					</listbox>
				</panelchildren>
			</panel>
		</columnchildren>
		<columnchildren width="100px">
			<vlayout style="text-align: center; margin-top: 70px;" spacing="15px">
				<button iconSclass="z-icon-arrow-right" tooltiptext="Add Project(s)"
						onClick="@command('addProjects')"/>
				<button iconSclass="z-icon-arrow-left" tooltiptext="Remove Project(s)"
						onClick="@command('removeProjects')"/>
			</vlayout>
		</columnchildren>
		<columnchildren width="50%">
			<panel title="Configured projects:" border="normal" height="100%">
				<panelchildren>
					<listbox id="right" height="100%" oddRowSclass=" " checkmark="true"
							 model="@init(vm.rightListModel)">
						<template name="model">
							<listitem label="@load(each.label)" image="@load(each.image)" />
						</template>
					</listbox>			
				</panelchildren>
			</panel>
		</columnchildren>
	</columnlayout>
</div>

package demo.layout.column_layout;

import java.util.Set;

import org.zkoss.bind.annotation.Command;
import org.zkoss.zk.ui.util.Clients;
import org.zkoss.zul.ListModelList;

public class ColumnLayoutViewModel {

	private static final String IMAGE_URL = "/widgets/layout/column_layout/img/blue-document.png";

	private ListModelList<ProjectInfo> leftListModel =
			createListModel("ZK Forge", "ZK Mobile", "ZK GWT", "ZK JSF", "ZK JSP");
	private ListModelList<ProjectInfo> rightListModel =
			createListModel("ZK", "ZK Studio", "ZK Spring");

	@Command
	public void addProjects() {
		moveSelection(leftListModel, rightListModel, "Please select at least one Project to add.");
	}

	@Command
	public void removeProjects() {
		moveSelection(rightListModel, leftListModel, "Please select at least one Project to remove.");
	}

	public void moveSelection(ListModelList<ProjectInfo> origin, ListModelList<ProjectInfo> destination,
							  String failMessage) {
		Set<ProjectInfo> selection = origin.getSelection();
		if (selection.isEmpty()) {
			Clients.showNotification(failMessage, "info", null, null, 2000, true);
		} else {
			destination.addAll(selection);
			origin.removeAll(selection);
		}
	}
	
	public ListModelList<ProjectInfo> getLeftListModel() {
		return leftListModel;
	}

	public ListModelList<ProjectInfo> getRightListModel() {
		return rightListModel;
	}

	private ListModelList<ProjectInfo> createListModel(String... labels) {
		ListModelList<ProjectInfo> listModelList = new ListModelList<ProjectInfo>();
		for(String label : labels) {
			listModelList.add(new ProjectInfo(label, IMAGE_URL));
		}
		listModelList.setMultiple(true);
		return listModelList;
	}
}

package demo.layout.column_layout;

public class ProjectInfo {
	private String label;
	private String image;

	public ProjectInfo(String label, String image) {
		super();
		this.label = label;
		this.image = image;
	}

	public String getLabel() {
		return label;
	}

	public String getImage() {
		return image;
	}
}