3 Column CSS Layout: Fixed Width And Centered

Posted: 19 May 2011 05:30 AM PDT

Last week I shared the code I use to start a 2 column fixed width layout. Today I want to expand that code and share how I’d build a 3 column layout that’s also of fixed width and centered on the page.

Many of the concepts will be the same as in the previous post so I’ll skip some of the details here. If you need more explanation than this post has I’ll refer you back to the 2 column layout post.

There will be some new concepts when we try to move the columns around for which I’ll offer a more detailed explanation.

For those who prefer to skip the explanation here’s a demo of what we’ll be building and you can view the source for the code.

The HTML

As with the 2 column layout, the html for a 3 column layout is rather simple. In fact the only real difference is one additional div for our third column.

 <div id="container">         <div id="header"> 		<p>Header</p> 	</div> 	<div id="primary"> 		<p>Primary Sidebar</p> 	</div> 	<div id="content"> 		<p>Main content</p> 	</div> 	<div id="secondary"> 		<p>Secondary Sidebar</p> 	</div> 	<div id="footer"> 		<p>Footer</p> 	</div> </div>

Instead of using sidebar-1 and sidebar-2 I’m calling the sidebars primary and secondary. You’re free to call them whatever works best for you.

One point to make about the html is the order of the divs. If you remember last week we moved the columns simply by changing the direction of floated divs. We’ll do the same here, but that alone won’t allow us to reorder the columns in all possible ways.

I’ll get to the details in a bit, but with 3 columns there are 6 potential ways to order those columns. We can achieve 4 of those 6 ways just by changing the direction of the floats. For the last 2 we’ll need to use some relative and absolute positioning.

The CSS

Once again the css is rather simple and should be familiar if you read the previous post. And just as with the 2 column demo I’ve stripped away css that’s only there to make the demo more presentable. Here’s the css we need for this layout

 #container { 	width: 960px; 	margin: 0 auto; } #primary { 	float: left; 	width: 240px; } #content { 	float: left; 	width: 480px; } #secondary { 	float: left; 	width: 240px; } #footer { 	clear: both; }

There really isn’t anything new here when compared to the 2 column layout. We’ve used our container div to center everything on the page and floated our columns to the left. Lastly we cleared the footer.

If you need explanation about what’s going on please see that explanation in the 2 column layout post.

While I’ve floated all 3 divs to the left, you could also float the rightmost column to the right. In this case that would our #secondary div.

I typically float all columns in the same direction, though I think it’s more common to float the rightmost div to the right. Like I mentioned last week, I’m unaware of either being better or worse.

Floating everything in one direction made it easier for me to understand when I first started working with floats and now it’s become habit.

Rearranging the Columns

The first way to rearrange columns is to reorder their divs in the html. When first developing a site you’ll likely structure your html how you want the columns to display on the page.

There will be times though when you want to move the columns around after the site is live or because you want to the columns to have different orders on different pages without having to change the html.

Fortunately we can rearrange the columns through css alone and doing so will hopefully make for a good learning experience.

I mentioned above there were 6 possible ways we could order the 3 columns.

primary, content, secondary
secondary, content, primary
content, secondary, primary
primary, secondary, content
secondary, primary, content
content, primary, secondary

Not the most logical order to list them I admit, but there’s a reason why I’ve listed them this way.

The first order above (primary, content, secondary) we’ve already coded. The next 3 on the list we can get to by changing float directions. For the last two we’ll need to mix in some positioning.

Secondary, Content, Primary

When we float all 3 columns in the same direction they will always display in the same order they appear in the html. That will be true regardless of whether we float all 3 to the left (as we’ve done above) or to the right.

If we float all 3 divs to the right we’ll get the reverse order of how they appear in the html, which is all we need to achieve this column order.

The easiest way then to have all 3 columns display in the same sequential order as they appear in the html is to float all 3 in the same direction either left or right.

Primary, Secondary, Content

To get the next two layouts on the list we’ll change the direction of a single float so it’s in the opposite direction of the other two.

When we float any 2 of the 3 columns in one direction and float the third in the opposite direction, the one floated opposite will sit at the outermost edge in the direction it’s floated.

If we want to move our main content div to the right we’ll float our main content to the right and keep primary and secondary floated to the left.

As you might expect the two sidebars display to the left of the content in the order they appear in the html. In our case the primary column will be leftmost and the secondary column will appear to it’s right.

Content, Secondary, Primary

Similarly if we want our primary column to be the rightmost column we float it to the right and float the other 2 columns to the left.

Again if 2 columns are floated in one direction and the third is floated opposite the opposite will display at the far end of the same direction it’s floated and the other 2 columns will display in the order seen in the html.

Secondary, Primary, Content

Unfortunately we need to do more than change float directions to get the last 2 orders.

Let’s think for a moment about how we might go about setting up this column order. Since we want the main content column to be rightmost let’s start by floating it to the right.

One of our 3 columns is now where want. We’re left needing to swap the order of the primary and secondary columns.

Your first instinct might be to float the primary column to the right, but that will place it to the right of the main content. What we need to do is add some positioning. Fortunately we don’t need to add a lot.

I won’t be able to offer a full explanation for how positioning works here so I’ll direct you to my post on understanding css positioning if you need a more detailed explanation for why the following works.

First we’ll add relative positioning to our container div

 #container {position: relative}

This won’t affect our #container div at all, but it will allow us to position columns relative to the container div. If we skip this we’ll be positioning columns relative to the body of our html.

Next we’ll remove the float and add absolute positioning to the primary sidebar.

 #primary {position: absolute}

If we stop here something strange happens. Our primary column hasn’t moved, but our secondary column seems to have vanished.

By default our primary column will have a value of 0 for it’s left property, which keeps it right where it was. However by changing from a float to position the primary column no longer holds the secondary column to its right.

Our secondary column is now hiding behind our primary column. Understanding why is a matter of understanding the css stack and the z-index property.

We need to move the primary column further to the right, which will also reveal the secondary column. We do so by increasing the value of left to be equal to the width of the secondary column

 #primary {left: 240px}

And now all 3 columns are displaying exactly where we want.

Content, Primary, Secondary

To get our last layout we need to reverse the order of the columns we just set up above.

Here we want the content on the left and the secondary column on the right so let’s switch the direction of the floats for both.

Not bad. We’re almost there. In fact the only problem at this point is the primary div isn’t far enough to the right. We just need to alter it’s left value to match the width of the content.

 #primary {left: 480px}

and we’re done.

We used the same basic concept in both of the above orders.

The column we wanted to be furthest left we float left. The column we wanted to be furthest to the right we float right. For the column we want in between we used absolute positioning and gave it a left value equal to the width of the leftmost column.

We also made sure to add relative positioning to the container div.

Note: Like our 2 column layout this won’t create columns of equal height as it appears in the demo. The columns have equal height because I set their heights to the same value. Creating equal height columns is something for another time, though I promise to write a post about how before too long if you’re interested.

Summary

Setting up the css for a 3 column layout isn’t really any harder than setting up the css for a 2 column layout. The same principle of floating all the columns in the same direction applies.

If you’ve understood this and the last post you should now be able to create 4 and 5 column layouts as well.

What’s a little trickier is rearranging the columns. We changed the float direction of columns to achieve several column layouts and used positioning to get to a couple more.

If you’ve been following along you now have several different methods for setting up multi-column css layouts regardless of how many columns and regardless of the order those columns appear in your html.

I’d encourage you to play around. Change floats and position different columns. Try adding a 4th column and see how you can reorganize all of them.

In this and the last post I’ve given you some instructions for moving blocks around on a web page. Spend some time moving those blocks around. The more you experiment on your own, the greater you’ll understand how and why this all works.

Next week I’ll continue with fully fluid layouts. The principles will be very much the same as they are here with one key difference.