1. Home
  2. Computing & Technology
  3. Web Design / HTML

How to Build a 3-Column Layout in CSS

By , About.com Guide

2 of 9

Write Basic HTML/CSS and Create a Container Element

Since this page will be a valid HTML document, I need to start out with an empty HTML container:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>

Then, I add in the basic CSS styles to zero out the page margins, borders, and paddings. While there are other standard CSS styles I normally add to new documents, these styles are the minimum you need to get a clean layout. Add them to the head of your document:

<style type="text/css">
html, body {
  margin: 0px;
  padding: 0px;
  border: 0px;
}
</style>

To start building my layout, I always put in a container element. It sometimes happens that you can get rid of the container, but for most fixed-width layouts, having the container element makes it easier to manage across different Web browsers. So in the body I put:

<div id="container"></div>

And in the CSS style sheet I put:

#container { }
Explore Web Design / HTML
About.com Special Features

The Best Web Trends of the Decade

A look back at the best innovations, ideas and technologies over the last 10 years, More >

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

  1. Home
  2. Computing & Technology
  3. Web Design / HTML
  4. CSS
  5. CSS Tutorials
  6. How to Build a 3-Column Layout in CSS - Step-by-Step

©2009 About.com, a part of The New York Times Company.

All rights reserved.