1. Technology

How to Build a 3-Column Layout in CSS

By

5 of 9

To Get 3 Columns, Start By Building 2 Columns

When you build a 3 column layout with CSS, you need to divide your layout into groups of two. So for this 3 column layout, I'm going to group the middle and right column and place them next to the left column. In other words, first I create a two column layout where the left column is 250px wide, and the right column is 610px wide (300 each for the two columns, plus 10px for the gutter between them).

The HTML looks like this:

<div id="col1">
 <p>Ut aliquip ex ea commodo consequat. Velit esse cillum dolore ut enim ad minim veniam, lorem ipsum dolor sit amet. In reprehenderit in voluptate quis nostrud exercitation eu fugiat nulla pariatur. Velit esse cillum dolore ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 </div>
 <div id="col2outer">
 <p>Ut enim ad minim veniam, sed do eiusmod tempor incididunt ullamco laboris nisi. Ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur.</p>
 </div>
 

As you can see, I added placeholder text in the columns so that they were more visible when testing. The CSS looks like this:

#container #col1 {
 width: 250px;
 float: left;
 }
 #container #col2outer {
 width: 610px;
 float: right;
 margin: 0;
 padding: 0;
 }

The column I want on the left (col1) is floated to the left, while the other is floated to the right. Because the total width of both columns is 860px, there will be a 10px gutter between them, and I don't have to worry about margins!

  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.