3 Column CSS Layout

You might have guessed that given my last post was about a 2 Column CSS Layout this one would be about developing a 3 Column CSS Layout. If you did give yourself a pat on the back and a couple of brownies points.

If you haven’t read that post yet you may want to since the two layouts will share a lot in common and this post will focus on the new information, namely that 3rd column. I’ll refer back to the 2 column layout throughout this post so reading it will help in understanding this one. It’s ok to read it now. Go ahead. I promise I’ll still be here when you return.

Just as in the last example you can see the image of the 3 column layout I created for this example below. The most obvious change is the addition of the third column on the right side. I’ve also made the the menu column and the new call to action column extend down the page. They don’t need to, but often 3 column layouts will be presented this way. As with the 2 column layout click the image to see the code in action. It’ll open in a new tab or window too so you can still read along here.

3 Column Layout
Click the image above to open the layout in a new window

Once again let’s start by looking at the html structure for the page and then look at the css used to layout the various elements. And once again the html structure is quite simple.

<div id="page">
 <div id="header">Header</div>
 <div id="menu">Menu</div>
 <div id="content">Content</div>
 <div id="action">Call To Action</div>
 <div id="footer">Footer</div>
</div>

The only new element here is the Call To Action div, so called because often you’ll place your calls to action in this right column. As with the 2 Column Layout we have several divs all enclosed within a container page div. Nothing really exciting here so let’s move on to the css.

Page Div

div#page {
  border:1px solid purple;
  width:755px;
  margin:0 auto;
  padding:5px;
  text-align:left;
  position:relative
}
div {
  text-align:center;
}

The css for the page div and for the generic div are exactly the same as with the 2 column layout as you might expect with one exception. I’ve added a position of relative to the page div. The relative positioning actually doesn’t affect the page div at all in how it’s displayed, but it will become important later when we introduce our new column to the layout. I’ll save discussion of this positioning until we reach that div.

Header Div

div#header {
  border:2px solid red;
  width:750px;
  height:30px;
}

I’ve added nothing to the header div from the 2 column example. You can read that post if you’re confused about anything here. Yawn. When are we going to see something new?

Menu Div

div#menu {
  border:2px solid green;
  width:150px;
  float:left;
  margin:10px 0 10px 5px;
  height:500px;
}

There are two minor changes in the menu div though essentially it’s still the same as the last layout. I’ve reduced the width a little to allow for the third column. I’ve also increased the height just so it extends down the page. You may or may not want to set the height in your design. Again to position the menu I’ve floated it to the left. Like I said nothing really new.

Content Div

div#content {
  border:2px solid blue;
  width:400px;
  margin:10px 0 10px 175px;
  min-height:500px;
  _height:500px
}

Believe it or not there’s really nothing new here with the content div either. C’mon on already? When are we going to get to the new stuff? Well I did reduce the width to make room for the new column and since out menu column has also been reduced in width I’ve decreased the left margin.

Again keep in mind we don’t want to use any css positioning on the content div since we want it to remain in the normal document flow to help control the position of the footer. A css layout doesn’t always mean using css positioning on everything. Again nothing new from last time. Hang on just a second more. The new stuff is coming I promise.

Action Div

Finally something new. You knew it had to be new though since this column wasn’t included in the 2 column layout huh? No fooling you.

div#action {
  position:absolute;
  top:50px;
  right:10px;
  border:2px solid green;
  width:150px;
  margin:0;
  height:500px;
}

The action div shares a little in common with the menu div in it’s width and height. I even used the same border. The margin has been set to 0 however since I used absolute positioning to layout this column and didn’t need the margin to push the div away from the page div border.

Like I just said the new column uses absolute positioning. At least I think that was me. I know I heard it somewhere. The key to css positioning is understanding where your element will sit at the default positon of 0 for the top and the left. When something is positioned in css it’s origin or (0, 0) position is at the (0, 0) position of it’s containing positioned element. Huh? Let’s use the specifics of this example to explain it again. Here’s where that relative position on the page div comes in.

I’ve specified a top position of 50px and a right position of 10px. They key question though is 50px and 10px from where. The action div is contained by the page div. The action div is inside the page div so the page div is the container. Since I’ve added a position:relative to the page div the container div also has positioning and the origin in this case is the upper right corner of the page div. It’s upper right since I’m setting the action div at the top and the right. I could also have specified bottom and left in which case the origin would be in the lower left of the page div. I could have positioned the action div using bottom and left just with different px amounts. It’s generally easiest though to position things from the nearest corner.

Now had there been no relative position on the page div the origin would be different. Instead of the upper right corner of the page div the origin would have been the upper right of the body. You can test this by grabbing the source and removing the position from the page div. The action div should move further to the top and right if you do. It will now be 50px and 10px from the corner of your browser window. Remember that the origin will be the closest containing div that is also positioned. If none of the containing divs have positioning applied the origin will ultimately be in the body of the page.

Footer Div

div#footer {
  border:2px solid red;
  width:750px;
  height:30px;
}

Sadly there’s nothing at all new here. Not even a width change. Maybe I should have changed the color of the border just to have something I could say about the footer. I’ll just remind you that since we’ve kept the content div as part of the normal document flow the footer will always sit just below the content div. The distance below will be the margin-bottom we applied to the content div which here was 10px.

Conclusion

We really didn’t need to do a lot to add a third column to our 3 column css layout. We obviously needed to add the new div for the 3rd column and used absolute positioning to place it in our layout. We naturally had to allow for the space this column would occupy so we reduced the width of the other 2 columns. Pretty obvious stuff. The only trick here was to add relative positioning to the page div, which made things easier, but wasn’t necessary since we could have positioned the new div in relation to the body instead.

I hope this 3 column layout as well as the previous 2 column layout has helped to get you started on your own css layouts. Neither layout needs to be complicated and I hope I’ve simplified how to build their basic structure. To flesh out your pages you would start adding things inside each of the divs, much in the same way you might nest tables inside of other tables. The difference here is that once you get used to using css layouts you’ll find you have more control over how you can layout your page than you would using tables. You’ll also find you’ll use less code and spacer images as well as being able to make the images you do include smaller. Your pages will load faster and you’ll find your code easier to maintain. So get out there and start practicing your 2 and 3 column css layouts.

Download a free sample from my book, Design Fundamentals.

17 comments

    • My bad Kev. In the original post I forgot to show the css position: relative on the page div. It was in the example I linked to and it’s now in the post itself.

      That missing bit of css was causing the problem.

  1. It doesn’t work, the third column gets out of the page (surprisingly), in both IE and FF :( Maybe if you made a downloadeable page with all of the code I could check that I didn’t miss something (however I doubt it).

    • Thera it looks like I forgot to show position: relative on the page div in the original code for this post. I take it you found that bit of code in the example.

      My bad for missing it originally.

  2. Stephen

    I am going to add this example in some discussions that are going to be taking place on my forum soon. Well in fact I have already begun putting things in place.

    I will be comparing elements of this with http://www.MatthewJamesTaylor.com ‘s Three Column Layout and the ones found on http://www.tjkdesign.com and possibly a couple of others to!

    You never know you may even get tempted to join in the conversation.

    And yes I know some of what I am giving Steve with this comment – call it mutual respect!

  3. You don’t have “position:relative” on the “div#page” declaration on the sample code on this page (it is on your linked example). This is what causes the #action div to fall outside the borders – without position:relative on #page, #action positions itself absolutely from the parent element (the tag)

  4. Hmmm, I’m having the same problem with the action column/3rd column sticking outside of the page div. How do I fix this? I have the code below for the action div, and for the page div.

    action div
    div#action {
    position:absolute;
    top:50px;
    right:10px;
    border:2px solid green;
    width:150px;
    margin:0;
    height:500px;
    }

    page div
    div#page {
    border:1px solid purple;
    width:755px;
    margin:0 auto;
    padding:5px;
    text-align:left;
    }
    div {
    text-align:center;
    }

    • My bad Shay. See Jean’s comment above.

      The problem is I forgot to add position: relative to the css for page div when I originally wrote the post. If you add the positioning to that div the third column should move back inside the page div.

      Sorry about that.

  5. Do you know what I hate when someone goes out of their way to help someone online and most of the comments you get is that it doesn’t not work. I wrote a very detailed on how to create a install.wim with all your favorite programs and all their updates. Over 500 users said they it did not work and then users started to read more and guess what it worked so many users are ungrateful when they receive help.

    • I hear you. I try to remember though that much of what’s in this post is still very new to some people and as much as I tried to explain things as simply as I could, I’m sure I’ve left out steps that would be helpful for some people.

  6. Hi, this is good post & also clears my some confusions,

    but there is some problem with third column, as i have exactly followed the same css as written here..but 3rd column is not beside the 2nd one :( i have also given the position:relative to the page div.

    plz help:following is the css

    #page{
    border:1px solid purple;
    width: 755px;
    margin:0 auto;
    padding:5px;
    position:relative;
    text-align:left;
    }

    div {
    text-align:center;
    }

    #header{
    border:2px solid red;
    width:750px;
    height:30px;
    }

    #menu{
    border:2px solid green;
    width:150px;
    margin:10px 0px 10px 5px;
    height:500px;
    float:left;
    }

    #content{
    border:2px solid blue;
    width:400px;
    height:500px;
    margin: 10px 0px 10px 175px;
    min-height:500px;
    _height:500px
    }

    #action{
    position:absloute;
    top:50px;
    right:10px;
    boder:2px solid green;
    width:150px;
    height:500px;
    margin:0;

    }

    #footer{
    border:2px solid red;
    width:750px;
    height:30px;

    }

    • Sumiya is this page online? If you can put it online and send me a link I’ll take a look.

      My first thought is the widths aren’t adding up and not leaving enough room for one of the columns. That usually ends up being the issue. It looks like you tried to account for that, but it’s hard for me to see looking only at the css.

      Post a link or feel free to zip everything up and send me an email and I’ll take a look and see if I can spot the issue.

Leave a Reply

Your email address will not be published.

css.php