Dave Woods - Freelance Web Design Warwickshire

3 Column Fluid CSS Layout

If you haven’t already had a look at the 2 Column Fluid CSS Layout tutorial then you may want to work through that one first as this tutorial is only a slight modification of all the rules already defined for that layout and just requires a few minor adjustments.

OK, so here’s the 3 Column Fluid CSS Layout that we’ll be creating.

HTML

The HTML is only a slight adjustment to the two column layout so you’ll need to simply add another column before the main content.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><title>3 Column Fluid Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="container">
<div id="header">
<h1>Page Title</h1>
</div>
<ul id="navigation">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
<div id="additional">
<p>Morbi convallis lectus a elit. Morbi augue. Aenean quis ipsum non dui interdum egestas. Suspendisse quis turpis. Suspendisse et sem in neque dictum hendrerit. Nulla pede.</p>
</div>
<div id="content">
<h2>Page Content</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pulvinar eros eu diam. Quisque ut orci ut nunc lobortis aliquam. Praesent metus. Pellentesque luctus. Suspendisse nisl.</p>
<p>Morbi convallis lectus a elit. Morbi augue. Aenean quis ipsum non dui interdum egestas. Suspendisse quis turpis. Suspendisse et sem in neque dictum hendrerit. Nulla pede.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pulvinar eros eu diam. Quisque ut orci ut nunc lobortis aliquam. Praesent metus. Pellentesque luctus. Suspendisse nisl.</p>
</div>
<div id="footer">
<p>&copy; <a href="http://dave-woods.co.uk">Dave Woods</a></p>
</div>
</div>
</body>
</html>

CSS

You should already have the following CSS from the two column tutorial.

* {
padding: 0;
margin: 0;
}
body {
font-size: 100%;
font-family: arial, verdana, helvetica, sans-serif;
background-color: #CCC;
}
h1 {
font-size: 1.6em;
}
h2 {
font-size: 1.4em;
}
a, a:link {
color: #CCC;
}
a:hover {
color: #FFF
}
#content p {
margin-bottom: 10px;
}
#container {
padding: 20px;
font-size: 0.8em;
}
#header {
background-color: #C99;
padding: 30px;
border: 1px solid #000;
margin-bottom: 20px;
}
#navigation {
float: left;
width: 200px;
padding: 10px;
background-color: #66C;
border: solid 1px #000;
list-style: none;
}
#content {
margin-left: 242px;
border: solid 1px #000;
padding: 10px;
background-color: #FFF;
}
#footer {
background-color: #66C;
padding: 10px;
border: 1px solid #000;
margin-top: 20px;
text-align: center;
}

Now we need to add the CSS rules for the new additional column

#additional {
float: right;
width: 200px;
padding: 10px;
background-color: #99CC99;
border: solid 1px #000;
}

And finally, we need to modify the #content div by providing a right margin to cater for this additional column.

#content {
margin-left: 242px;
border: solid 1px #000;
padding: 10px;
background-color: #FFF;
margin-right: 242px;
}

Summary

And that’s essentially it and shows the flexibility of using CSS for page layouts. Please feel free to leave any comments below if you have any questions or suggestions.

17 comments on “3 Column Fluid CSS Layout

  1. Matt

    Nice. That’s sooo much clearer than a table.

    I particularly like the way it scrunches up when the browser window is too narrow and overwrites areas of the page, particularly the central (most important) content. Whereas a nasty table would have stuck at its minimum width and instigated a horizontal scroll bar.

  2. Dave Post author

    @anonymous – Yes, it’s quite basic but there are many developers who don’t specialise in CSS who may find this tutorial useful.

    @Matt – Thanks. To be honest, I’d usually tend to apply a min and max-width to stop that from happening but these would be set at reasonably widths

    min-width: 600px; max-width: 1000px; for example so that the content can expand and contract between these boundaries.

    You could also create some nice effects by setting some widths which allow columns to drop underneath each other and stack which would be much nicer than how the content overflow’s at the moment.

  3. Dave Post author

    I completely agree with everything that’s written in the linked article. However, fluid layout doesn’t mean 100%.

    Fluid layouts should allow the layout to expand and contract but they shouldn’t take any control away from the designer or make the site any less usable.

    As I mentioned in the comment above yours, we can set rules so that a page has a certain region that it can expand and contract between.

    If your design doesn’t work well under 600px then set a min-width: 600px; on the container.

    At the same time, if the line length becomes too long then you can set a max-width so that the content doesn’t become wider than this.

    Whilst max and min width aren’t supported in IE6 and below there are other methods that can be used which will ensure the designer still has enough control to ensure the site is usable.

    Hope that helps?

  4. Jermayn Parker

    I like it alot, as you say there are heaps and heaps of tuts that are twice as complicated!!

    The only thing I would suggest to change is the order of the left side and the content divs. I prefer having the content first as its more semantic.

  5. Dave Post author

    Hi Jermayn, it’s an argument that’s been disputed numerous times and I’m not sure why you think it’s more semantic?

    Personally, I prefer the code to be in the same order as it will be displayed otherwise you’re giving a different experience to users without CSS.

    Also consider mobile users who may not have CSS support and have to scroll past the content to reach the navigation.

    Then there’s the search engines. For a really long page, they may not index all the content and therefore you might find that they don’t even reach the navigation and therefore can’t follow these links to the sub-pages of your site meaning that only the homepage gets indexed.

    That’s obviously just my personal opinion and I’ve seen it done the way you suggested many times as well.

    Hope that makes sense?

  6. critic

    Not only is this basic but it is basically flawed. The middle column get totally mangled if the browser window is continuously reduced in size. Min width should be set on the middle column and integrity should be maintained.

  7. Dave Post author

    I agree as was mentioned in one of my earlier comments. Either a min width should be applied or content should be placed in the middle column which stops it from getting smaller than a certain width.

    I’d prefer to apply a min and max width to the overall container though personally but there are a number of options and this tutorial is aimed more at the beginner who is just starting out with CSS.

  8. Pingback: Dave Woods - HTML, CSS, Web Design » Min and Max Width 3 Column Fluid CSS Layout

  9. dbear

    Thanks, Dave. A perfect gradient for a CSS newb to understand. In about a half hour, I gained a basic working knowledge of CSS and of how the parameters actually effect the layout. Much better than trying to get it out of the full technical manual where you don’t know what’s important and useful, and what can be left for later.

  10. jenna

    Dave,

    Thanks for that code – have been looking all over for a simple explanation – and you had it.
    Thanks again.

  11. MAH

    Your own page has a problem with the text in the grey heading banner. It’s not all visible.

  12. Pingback: 網站製作學習誌 » [Web] 連結分享

  13. Karen

    Hello Dave,

    I used your 3 column layout as a starting point for my web development last year.

    This year I am trying to get my site active but wanted to make some changes due to the increasing mobile device use. During investigation it seems that “Document Order” is very important for mobiles.

    I have tried to move the order of the columns so that “main content” will be a 1st priority. No matter what I try, the 3rd column drops to the bottom of the page…not beside the center column. It could be related to IE but I still need a solution.

    Any thoughts about this?

  14. Dave Woods Post author

    Hi Karen, Do you have an example of the code you’re using for this so far or have it live anywhere so I can take a look?