Multi Column Layout

Required JavaScript jQuery files

Address

Zerotouch Ltd
PO Box 3282
Maidenhead
Berkshire
SL6 6XG

Online forms

Request Information

Request information

Website Feedback

Website feedback

Phone

01628 820100

Fax

01628 820101

CSS


.multi-column {
	float: left;
	padding-right: 30px;
	padding-bottom: 10px;
	padding-top: 10px;
	margin-right: 15px;
	background: yellow;
	min-height: 100px;
	background: url(images/sg-horizontal-dotted-line.png) repeat-y top right;
	}
	
.multi-column-last {
	background: none;
	margin-right: none;
	padding-right: none;
	}

a.online-form {
	background:url(images/sg-icon-online-form.png) left 2px no-repeat;
	text-decoration: none;
	padding-left: 20px;
}

a.online-form:link {
	color: #555;
	}
	
a.online-form:hover {
	color: #000;
	}

JavaScript


HTML


<div class="multi-column">
<h2>Address</h2>
<address>Zerotouch Ltd<br />
PO Box 3282<br />
Maidenhead<br />
Berkshire<br />
SL6 6XG</address>
</div>

<div class="multi-column">
<h2>Email</h2>
<h3>Information</h3>
<a href="mailto:info@zerotouch.com">info@zerotouch.com</a>
<h3>Sales</h3>
<a href="mailto:sales@zerotouch.com">sales@zerotouch.com</a>
<h3>Careers</h3>
<a href="mailto:careers@zerotouch.com">careers@zerotouch.com</a>
</div>

<div class="multi-column">
<h2>Online forms</h2>
<h3>Request Information</h3>
<a class="online-form" href="mailto:info@zerotouch.com">Request information</a>
<h3>Website Feedback</h3>
<a class="online-form" href="mailto:info@zerotouch.com">Website feedback</a>
</div>

<div class="multi-column-last">
<h2>Phone</h2>
<p>01628 820100</p>
<h2>Fax</h2>
<p>01628 820101</p>
</div>