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

How to Build a 3-Column Layout in CSS

By Jennifer Kyrnin, About.com Guide

1 of 9

Draw Your Layout

Simple wireframe 3-column layout

Simple wireframe 3-column layout

Image courtesy J Kyrnin

You can draw your layout on paper or in a graphics program. If you've already got a wire-frame or even more extensive design in mind, you should simplify it down to the basic boxes that make up the site. This design has 3 columns in the main content area, as well as a header and footer. If you look closely, you can see that the three columns are not equal in width.

Once you have your layout drawn out, you can start thinking of dimensions. This design is going to have the following basic dimensions:

  • No more than 900px wide
  • 20px gutter on the left
  • 10px between columns and rows
  • My columns are 250px, 300px, and 300px wide
  • The top row is 150px tall
  • The bottom row will be 100px tall
Explore Web Design / HTML
About.com Special Features

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

Easy ways to connect two computers for networking purposes. 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.