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

How to Build a 3-Column Layout in CSS

By , 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

Holiday Central

What to eat, where to go, fun things to do and how to save money on the perfect gifts. 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.