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

Write Basic HTML/CSS and Create a Container Element

Since this page will be a valid HTML document, Start 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>

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:

<style type="text/css">
 html, body {
 margin: 0px;
 padding: 0px;
 border: 0px;
 }
 </style>

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. So in the body put this:

<div id="container"></div>

And in the CSS style sheet, 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, 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.

#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 the container because it has nothing in it. If you add placeholder text, you'll be able to see the 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 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:

<h1>My Header Row</h1>

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:

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

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

05
of 09

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

Placeholder text in the columns makes them 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 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.

06
of 09

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

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

 

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "How to Build a 3-Column Layout in CSS." ThoughtCo, Sep. 27, 2017, thoughtco.com/build-3-column-layout-in-css-3467087. Kyrnin, Jennifer. (2017, September 27). How to Build a 3-Column Layout in CSS. Retrieved from https://www.thoughtco.com/build-3-column-layout-in-css-3467087 Kyrnin, Jennifer. "How to Build a 3-Column Layout in CSS." ThoughtCo. https://www.thoughtco.com/build-3-column-layout-in-css-3467087 (accessed November 18, 2017).