Tutorial by: Sebastian Sulinski

 

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

Demo is available here.

 

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, consectetur adipisicing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
anim id est laborum</p>
</div>
<div id="right">Some content</div>
<div class="clearer"> </div>
</div>
<div id="footer"><p>© <a href="http://www.sebastiansulinski.co.uk/" 
title="Freelance Web Designer" target="_blank">Freelance Web Designer</a>
</p>
</div>
</div>

 

Now our CSS:

 

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
text-align: center;
margin: 0px;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 0px;
}
#wrapper {
width: 956px;
padding: 10px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: auto;
text-align: left;
border: 1px solid #DDDDDD;
}
#header {
margin: 0px;
padding: 0px;
height: 100px;
width: auto;
background-color: #f1f1f1;
}
#container {
padding: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 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-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 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: #666666;
text-decoration: none;
display: block;
margin: 0px;
padding-top: 3px;
padding-right: 15px;
padding-bottom: 3px;
padding-left: 15px;
width: 130px;
}
#nav li a:hover {
color: #999999;
text-decoration: none;
}
#center {
height: auto;
width: 504px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
float: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 6px;
line-height: 1.8em;
}
h1 {
font-size: 14px;
margin: 0px;
padding: 0px;
}
#right {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
height: auto;
width: 160px;
float: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 6px;
}
.clearer {
font-size: 0px;
line-height: 0px;
display: block;
margin: 0px;
padding: 0px;
clear: both;
height: 0px;
width: auto;
}
#footer {
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
text-align: center;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 15px;
padding-left: 0px;
background-color: #F1F1F1;
}
#footer p {
color: #999999;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
}
#footer a:link, #footer a:visited, #footer a:active {
color: #999999;
text-decoration: none;
}
#footer a:hover {
color: #CCCCCC;
text-decoration: none;
}

 

Ok - so what actually has happened?

 

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 it 1% height.

Without this, background image wouldn't be visible in this rather not very friendly browser.

Container also has a background image which you can download underneath.

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.

 

I hope you'll enjoy this tutorial.

Excellent tutorial Sebastian, well explained aswell.

 

A great starting block for creating CSS based layouts.

 

Thanks for taking the time to create it.

I love CSS and how you can achive a well structured design with mimimal code.

 

Nice tutorial

Thank you - I'm glad you like it.

yer, thats wicked cool.

very useful tutorial and also easy to understand this code

Thank you so much Sebastion for posting this tutorial. I have bought lots of books but none of them explain the three column layout as concisely as you have. For the first time I feel I am begining to understand.

 

Slooshy

yeah, cool tutorial!

Sounds a bit easier now!

Cheers

It's well explained and the outcome is good. Very nice indeed.

Wow. You should take a look on short-hand Css my friend.

 

body {
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;;
color: #333333;
text-align: center;
margin: 0px;
padding: 20px 0 20px 0;
}
#wrapper {
width: 956px;
padding: 10px;
margin-top: 0 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-top: 10px 0 0 0;
background: url('back.gif') repeat-y top left;
height: 1%;
width: auto;
}
#left {
margin: 0px;
width: 160px;
padding-top: 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: url('bullet.gif') no-repeat top center;
}
#nav li a:link, #nav li a:visited, #nav li a:active {
color: #666;
text-decoration: none;
display: block;
margin: 0px;
padding-top: 3px 15px 3px 15px;
width: 130px;
}
#nav li a:hover {
color: #999;
text-decoration: none;
}
#center {
height: auto;
width: 504px;
padding-top: 10px 20px 10px 20px;
float: left;
margin-top: 0px 0 0 6px;
line-height: 1.8em;
}
h1 {
font-size: 14px;
margin: 0px;
padding: 0px;
}
#right {
padding-top: 10px 20px 10px 20px;
height: auto;
width: 160px;
float: left;
margin-top: 0px 0 0 6px;
}
.clearer {
font-size: 0;
line-height: 0;
display: block;
margin: 0;
padding: 0;
clear: both;
height: 0;
width: auto;
}
#footer {
margin-top: 10px 0 0 0;
text-align: center;
padding-top: 15px 0 15px 0;
background-color: #F1F1F1;
}
#footer p {
color: #999;
margin-top: 0px auto 0 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;
}

 

My lines: 109

Your lines: 151

 

You should also use a browser reset as IE, Firefox or other browsers will render this layout differently. * { margin: 0; padding: 0; } would allow you to drop 30-40 more lines of just resetting.

 

I don't want to "show-off" or anything, but shorthand CSS makes everything so much easier and it's even easier to understand and write code that way. Hope someone learned something by my example above.

I've tried this layout www.triumphvillage.com

But this only works in internet explorer, it doesn't work in Firefox. Why is that? Can somebody help me to make this work in firefox as well? thanks

Good Tut old chap!

 

@Sono - I see your point but your css does not work.

I might've done something wrong when cutting into Sebastian's code, but I don't think that is the reason.

 

I think the reason is that Sebastian does not use any kind of browser resetting, which forces him to write code that deals with that. Browser resetting is vital if you want your site to behave the same way in all browsers. This is why I always use Eric Meyer's CSS reset and I recomend you to do to. You might need to rebuilt your layout if you go for Meyer's method, but I would say it's totaly worth it. So yes.

 

Bottom line. Short-line Css is good practise. If my version is rendered different than Sebastians, that's because I've also removed CSS defaults, like background-attachment: scroll;. Poor browsers like IE6 might use something else as a default value. Do you understand, or did I make it worse.

Ok, I see what you mean! - your way would make less need for separate CSS for ie6 etc.

Exactly.

Nice clear tutorial!