Multi-column page layout example code. A user resource provided by The Gorilla Guide

This is the code for The Gorilla Guide multi-column page example. Feel free to copy and use it as the basis of your own multi-column pages. Here's the web page it creates.

Back



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<!-- This document copyright(c) The Gorilla Guide 2011. It may be copied,	--> 
	<!-- modified or reused for any purpose. Please do not change or remove this	--> 
	<!-- copyright declaration. The Gorilla Guide must be acknowledged if this	-->
	<!-- document is redistributed in a predominantly unmodified form.		-->
	
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

	<style type="text/css">
	/* page container to control horizontal position and width of active page body */
		div#pagearea { 
			margin: 0 auto; 
			max-width: 1100px; 
		}

		/* control column alignments */
		div#left, div#main, div#right { 
			float: left; 
			margin: 0; 
			padding: 0; 
			min-height: 10em; 
		}
		
		/* control column widths */
		div#header	{ width: 100%; }
		div#left 	{ width: 25%; }
		div#main 	{ width: 55%; } 
		div#right 	{ width: 20%; }
		div#footer	{ clear: both; }

		/* set styling for the multi-column layout */
		body		{ background-color: #F6F6FF; 
				font-family: 'Times New Roman', Georgia, Serif; 
		}
		div#pagearea	{ background-color: white; 
		}
		div.articlebox	{ padding: 0 0.5em 0.5em 0.5em; 
				margin: 0 0.5em 0.5em 0.5em; border: 2px solid Lavender; 
		}
				
		/* set any other content styling */		
		div#header	{ background-color: black; color: white; 
				padding-bottom: 0.5em; margin-bottom: 1em; }
		div#header h1	{ font-size: 3em; padding: 9px; }
		div#footer p	{ padding:  0 0 9px 9px; }
		h1, h3, h4 	{ padding: 0; margin: 0.25em 0 0 0; }
		img		{ float: left; margin: 5px 9px 9px 0; 
				border: 1px solid lightgray; 
				max-width: 100%; 
				height: auto; }
	</style>
	
</head>

<body>
<div id="pagearea">

	<div id="header">
		<h1>Multi-column layout example</h1>
	</div>
	
	<div id="left">
		<div class="articlebox">
			<h3>Latest news</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
			Phasellus congue, erat sed scelerisque imperdiet, risus dolor vel
			vulputate nibh, sed posuere tellus nisl ac felis. Donec et felis
			mi viverra blandit odio. non id odio. Nulla justo felis, ornare
			quis rhoncus porta, dictum nec orci.
			</p>
		</div>
		<div class="articlebox">
			<h4>Other news</h4>
			<p>Praesent sed accumsan metus. Vivamus et erat sit amet ipsum
			suscipit bibendum. Mauris cursus facilisis rhoncus.
			</p>
		</div>
	</div>
	
	<div id="main">
		<div class="articlebox">
			<h1>Headliner here!</h1>
			<p>Fusce id arcu at nibh semper accumsan. Nulla dui magna, tristique
			vel sagittis nec, hendrerit et nunc. Integer gravida lectus vitae
			tortor congue sed accumsan magna pulvinar. Aenean sagittis ipsum
			condimentum lacus mollis venenatis nec sollicitudin sapien. Nullam
			at velit nisl. 
			</p>
			<img src="image.jpg" 
				alt="Your image here" title="Your image here">
			<p>Donec a porttitor enim. Integer condimentum elit eget felis 
			euismod	ultrices. Vivamus et erat sit amet ipsum suscipit bibendum.
			Mauris cursus facilisis rhoncus. Morbi fringilla turpis felis, at
			consectetur magna. 
			</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
			Phasellus congue, erat sed scelerisque imperdiet, risus dolor
			vulputate nibh, sed posuere tellus nisl ac felis. Praesent sed
			accumsan metus. Vivamus et erat sit amet ipsum suscipit bibendum. 
			Mauris cursus facilisis rhoncus. Morbi fringilla turpis felis, at
			consectetur magna. Donec et felis vel mi viverra blandit non id
			odio. Nulla justo felis, ornare quis rhoncus porta, dictum nec
			orci.
			</p>
			<p>In pellentesque sem non augue auctor sagittis ac et quam.
			Vivamus at orci ut orci consectetur interdum. Nullam rutrum, purus
			vitae euismod feugiat, magna dui tincidunt est, ac eleifend nibh
			odio a ligula. 
			</p>
		</div>	
	</div>
	
	<div id="right">
		<div class="articlebox">
			<h4>Gossip and other drivel</h4>
			<p>Donec a porttitor enim. Integer condimentum elit eget felis
			euismod ultrices. Vivamus et erat sit amet ipsum suscipit bibendum. 
			Mauris cursus facilisis rhoncus. Morbi fringilla turpis felis, at 
			consectetur magna. Praesent sed accumsan metus. Vivamus et erat sit 
			amet ipsum suscipit bibendum.
			</p>
		</div>
	</div>
	
	<div id="footer">
		<hr />
		<p><b><a style="color: RoyalBlue" href="http://thegorillaguide.com">
			The Gorilla Guide</a> - inspired web design</b>
		</p>
	</div>
	
</div><!-- end page area -->

</body>
</html>

The Gorilla Guide - inspired web design