1. Technology

How to Build a 3-Column Layout in CSS


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">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Untitled Document</title>

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;

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 { }
  1. About.com
  2. Technology
  3. Web Design / HTML
  4. CSS
  5. CSS Tutorials
  6. How to Build a 3-Column Layout in CSS - Step-by-Step

©2014 About.com. All rights reserved.