Multi Column Layout
Required JavaScript jQuery files
- None required
Address
Zerotouch LtdPO Box 3282
Maidenhead
Berkshire
SL6 6XG
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>
