Course lectures : 1 of 1

Three column layout using pure CSS and background image

Last updated: 14th August 2007

three column layoutcss three columns layoutcss tutorialcss course

In this tutorial I will explain how to design three column layout using pure css (table-less layout) and background image.

Images used in this tutorial can be downloaded at the bottom of this page.

To start with let's create a structure of our page. Please copy and paste the following content into your page:

<div id="wrapper">

	<div id="header"></div>
	
	<div id="container">
	
		<div id="left">
		
			<ul id="nav">
			
				<li><a href="#" title="home">home</a></li>
				<li><a href="#" title="about us">about us</a></li>
				
				<li><a href="#" title="services">services</a></li>
				<li><a href="#" title="portfolio">portfolio</a></li>
				
				<li><a href="#" title="testimonials">testimonials</a></li>
				<li><a href="#" title="contact us">contact us</a></li>
			
			</ul>
			
		</div>
		
		<div id="center">
		
			<h1>Title Placeholder</h1>
			<p>Lorem ipsum dolor sit amet</p>
		
		</div>
		
		<div id="right">Some content</div>
		
		<div class="clearer"> </div>
		
		</div>
		
		<div id="footer">
			<p>
                &copy; <a href="http://ssdtutorials.com/" target="_blank">SSD Tutorials</a>
			</p>
	
	</div>
	
</div>

Now our CSS:

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333;
	text-align: center;
	margin: 0px;
	padding: 20px 0px 20px 0px;
}
#wrapper {
	width: 956px;
	padding: 10px;
	margin: 0px auto 0px auto;
	height: auto;
	text-align: left;
	border: 1px solid #ddd;
}
#header {
	margin: 0px;
	padding: 0px;
	height: 100px;
	width: auto;
	background-color: #f1f1f1;
}
#container {
	padding: 0px;
	margin: 10px 0px 0px 0px;
	background-attachment: scroll;
	background-image: url(back.gif);
	background-repeat: repeat-y;
	background-position: 0px 0px;
	height: 1%;
	width: auto;
}
#left {
	margin: 0px;
	width: 160px;
	padding: 10px 20px 10px 20px;
	float: left;
}
#nav {
	margin: 0px;
	padding: 0px;
	list-style-image: none;
	list-style-type: none;
}
#nav li {
	margin: 0px;
	padding: 0px;
	display: block;
	background-attachment: scroll;
	background-image: url(bullet.gif);
	background-repeat: no-repeat;
	background-position: 0px 50%;
}
#nav li a:link, #nav li a:visited, #nav li a:active {
	color: #666;
	text-decoration: none;
	display: block;
	margin: 0px;
	padding: 3px 15px 3px 15px;
	width: 130px;
}
#nav li a:hover {
	color: #999;
	text-decoration: none;
}
#center {
	height: auto;
	width: 504px;
	padding: 10px 20px 10px 20px;
	float: left;
	margin: 0px 0px 0px 6px;
	line-height: 1.8em;
}
h1 {
	font-size: 14px;
	margin: 0px;
	padding: 0px;
}
#right {
	padding: 10px 20px 10px 20px;
	height: auto;
	width: 160px;
	float: left;
	margin: 0px 0px 0px 6px;
}
.clearer {
	font-size: 0px;
	line-height: 0px;
	display: block;
	margin: 0px;
	padding: 0px;
	clear: both;
	height: 0px;
	width: auto;
}
#footer {
	margin: 10px 0px 0px 0px;
	text-align: center;
	padding: 15px 0px 15px 0px;
	background-color: #f1f1f1;
}
#footer p {
	color: #999;
	margin: 0px auto 0px auto;
	padding: 0px;
}
#footer a:link,
#footer a:visited,
#footer a:active {
	color: #999;
	text-decoration: none;
}
#footer a:hover {
	color: #ccc;
	text-decoration: none;
}

Ok - so what actually has happened here?

Our entire layout is "wrapped" in the outside div with id="wrapper" The width of the wrapper is 956px plus it has 10px padding on each side. I have also added a 1px border to create the outline of our div against white background of the body tag.

Next element is a div with id="header" This is just a simple header with height of 100px.

Next element in the hierarchy is div with id="container". Container has margin and padding equal 0 plus - to satisfy our Internet Explorer we had to add to it 1% height.

Without this, background image wouldn't be visible in this rather not very friendly browser. Container also has a background image. This image is repeated vertically so regardless of the height of any of the element inside of the container the background image will fill in the the entire space vertically and horizontally.

Inside container I have created four divs with ids: #left, #center, #right and a class .clearer.

All of them except .clearer have float=left to ensure they are in line.

center and right divs have also left margin of 6px to give a gap in between the columns.

.clearer has font-size, line-height, margin, padding and height equal 0 and clear equal both.

This way it seperates our divs from what's after .clearer.

Then it's just footer and some simple formatting - feel free to change copyright to anything you want.

COMMENTS

If you'd like to include code example please wrap your code within <pre><code> tags.


<pre>
<code>
function fullName(firstName, lastName)
{
    return firstName + ' ' + lastName;
}
</code>
</pre>