1. Technology

How to Build a 3-Column Layout in CSS


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
  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.