How to Build a 3-Column Layout in CSS

This article explains how to build a 3-column layout in CSS. Instructions apply to CSS3 and older.

Draw Your Layout

You can draw your layout on paper or in a graphics program. If you already have a wire-frame or even more extensive design in mind, simplify it to the basic boxes that make up the site. This design that accompanies this article has three 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.

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

• No more than 900 pixels wide
• 20 px gutter on the left
• 10 px between columns and rows
• Columns that are 250px, 300px, and 300px wide
• The top row is 150px tall
• The bottom row is 100px tall

Write Basic HTML/CSS and Create a Container Element

Since this page will be a valid HTML document, start with an empty HTML container.

Add in the basic CSS styles to zero out the page margins, borders, and paddings. While there are other standard CSS styles for new documents, these styles are the minimum you need to get a clean layout. Add them to the head of your document.

To start building the layout, put in a container element. It sometimes happens that you can get rid of the container later, but for most fixed-width layouts, having the container element makes it easier to manage across different Web browsers.

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, the container is 870px wide with a 20 pixel gutter on the left. The gutter is set up with a margin style, but the padding on the container is zeroed out to prevent any elements from being as wide as the container.

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

Use a Headline Tag for the Header

How you decide to style the header row depends a lot on what is in it. If the 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 the headline the same way you style a div, and you avoid extraneous tags.

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

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

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 lie on the page.

A CSS descendant selector applied styles only to H1 elements that are inside the #container element.

To Get Three Columns, Start by Building Two Columns

When you build a three-column layout with CSS, you need to divide your layout into groups of two. So for this three-column layout, the middle and right column and grouped and placed next to the left column in 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 column on the left is floated to the left, while the other is floated to the right. Because the total width of both columns is 860px, there is a 10px gutter between them.

Add Two Columns Inside the Wide Second Column

To create the three columns, add two divs inside the wider second column, just like you added 2 divs inside the container column in the last step.

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

Add in the Footer

Now that the rest of the page is styled, you can add in the footer. Use a last div with a "footer" id, and add content so that you can see it. You can also add a border at the top, so you'll know where it starts.

Add in Your Personal Styles and Content

Now that you have the layout finished, you can start adding 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.