How to Build a 3-Column Layout in CSS

01
of 09
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

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

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;
 }
 </style>

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 { }

03
of 09
Style the Container

The container defines how wide the Web page contents will be, as well as any margins around the outside and padding on the inside. For this document, I want my container to be 870px wide with a 20 pixel gutter on the left. I'll set up the gutter with a margin style. But because I want any elements within this element to be as wide as the container, I will zero out the padding on the container.

#container {
 width: 870px;
 margin: 0 0 0 20px; /* top right bottom left */
 padding: 0;
 }

If you save your document now, it will be difficult to see your container. Mostly because it has nothing in it. If you add some placeholder text, you'll be able to see your container element more clearly.

04
of 09
Use a Headline Tag for the Header

How you decide to style the header row depends a lot upon what is in it. If your header row is just going to have a logo graphic and headline, then using a headline tag <h1> makes more sense than using a <div>. You can style your headline the same way you would style a div, and you avoid extraneous tags and "divitis".

The HTML for my header row goes right at the top of the container and looks like this:

<h1>My Header Row</h1>

Then, to set the styles on it, I added a red border on the bottom, so you could see where it ends, zeroed out the margins and padding, set the width to 100% and the height to 150px:

#container h1 {
 margin: 0;
 padding: 0;
 width: 100%;
 height: 150px;
 float: left;
 border-bottom: #c00 solid 3px;
 }

Don't forget to float this element with the float: left; property. The key to writing CSS layouts is to float everything - even things that are the same width as the container. That way, you always know where the elements will lay on the page.

I used a CSS descendant selector to apply my styles only to H1 elements that are inside the #container element.

05
of 09
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!

06
of 09
Then Add 2 Columns Inside the Wide Second Column

To create the 3 columns, add two divs inside the wider second column, just like you added 2 divs inside the container column in the last step. The HTML looks like this:

<div id="col2outer">
 <div id="col2mid">
 <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>
 <div id="col2side">
 <p>Nam libero tempore, quia voluptas sit aspernatur dicta sunt explicabo. Ullam corporis suscipit laboriosam, magnam aliquam quaerat voluptatem. Itaque earum rerum hic tenetur a sapiente delectus, sed ut perspiciatis unde omnis tempora incidunt ut labore et dolore.</p>
 </div>
 </div>

And the CSS looks like this:

#col2outer #col2mid {
 width: 300px;
 float: left;
 }
 #col2outer #col2side {
 width: 300px;
 float: right;
 }

Since these two 300px wide boxes are inside a 610px wide box, there will again be a 10px gutter between them.

07
of 09
Add in the Footer

Now that we've got the rest of the page styled, you can add in the footer. I just use a last div with a "footer" id, and add content so that you can see it. I also added a border on the top, so you'll know where it starts.

The HTML:

<div id="footer"><p>Copyright © 2008 </p></div>

The CSS:

#container #footer {
 float: left;
 width: 870px;
 border-top: #c00 solid 3px;
 }

08
of 09
Add in Your Personal Styles and Content

Now that you've got the layout finished, you can start adding in your own personal styles and content. Remember that the borders on the header and footer were added to show the layout sections, not specifically for design.

09
of 09
The Final HTML/CSS

Here is the entire document, HTML and CSS:

<!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">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Untitled Document</title>
 <style type="text/css">
 html, body {
 margin: 0px;
 padding: 0px;
 border: 0px;
 }
 #container {
 width: 870px;
 margin: 0 0 0 20px; /* top right bottom left */
 padding: 0;
 background-color: #fff;
 }
 #container h1 {
 margin: 0;
 padding: 0;
 width: 100%;
 height: 150px;
 float: left;
 border-bottom: #c00 solid 3px;
 }
 #container #col1 {
 width: 250px;
 float: left;
 }
 #container #col2outer {
 width: 610px;
 float: right;
 margin: 0;
 padding: 0;
 }
 #col2outer #col2mid {
 width: 300px;
 float: left;
 }
 #col2outer #col2side {
 width: 300px;
 float: right;
 }
 #container #footer {
 float: left;
 width: 870px;
 border-top: #c00 solid 3px;
 }
 </style>
 </head>
 
 <body>
 <div id="container">
 <h1>My Header Row</h1>
 <div id="col1">
 <p>Ut aliquip ex ea commodo consequat.</p>
 </div>
 <div id="col2outer">
 <div id="col2mid">
 <p>Ut enim ad minim veniam.</p>
 </div>
 <div id="col2side">
 <p>Nam libero tempore.</p>
 </div>
 </div>
 <div id="footer">
 <p>Copyright © 2008 </p>
 </div>
 </div>
 
 </body>
 </html>