Dave Woods - Freelance Web Design Warwickshire

2 Column Fluid CSS Layout

Fluid layouts are often avoided by designers and developers because they’re deemed as being much more complex than fixed width layouts. However, hopefully this tutorial will encourage a few more designers to try their hand at fluid layouts and demonstrate that these kinds of layouts can be achieved easily by using CSS.

Hereโ€™s the 2 Column Fluid CSS layout that will be covered in the tutorial below.

HTML

As always, the HTML for this is very simple and requires a few containers and semantic markup to display the content.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><title>2 Column Fluid CSS 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="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>
<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="footer">
<p>ยฉ <a href="http://dave-woods.co.uk">Dave Woods</a></p>
</div>
</div>
</body>
</html>

Pretty straight forward at the moment. Now for the CSS which you’ll be pleased to hear, isn’t much more complicated.

CSS

Now for the CSS. We start off by setting a few general rules for the body, headings and links which should be familiar for anyone with a basic CSS understanding.

* {
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
}

Next we’ll set the margin for paragraphs, padding for the container and a base font size for all the text within it.

#content p {
margin-bottom: 10px;
}
#container {
padding: 20px;
font-size: 0.8em;
}

One of the most useful things to remember in CSS, is that block level elements automatically fill 100% width unless this width is specified so when dealing with these types of elements within fluid layout’s we rarely have to set a width.

A common mistake is to try and create padding at a set px and then to try and calculate what the remaining space is in a percentage which is difficult as they aren’t really compatible so it’s always easier to just let the block level element do it’s job and automatically adjust to the remaining space as you’ll see from the next few styles we apply.

#header {
background-color: #C99;
padding: 30px;
border: 1px solid #000;
margin-bottom: 20px;
}

Within the #header we’re allowing this to fill the width of the page but also applying some spacing around and in the image with padding and margin as well as a border and background colour.

Next, we want the navigation to appear in a column on the left so we’ll float the #navigation unordered list to the left and provide it with a bit of styling information.

#navigation {
float: left;
width: 200px;
padding: 10px;
background-color: #66C;
border: solid 1px #000;
list-style: none;
}

Next comes the interesting part. We want the #content to fill the remaining space so we provide it with the following rule.

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

The border, padding and background-color are pretty straight forward but you may be wondering why the margin left is so large?

Because the #navigation is taken out of the document flow with the float, the margin needs to be calculated from the left edge of its container. Therefore, the width, padding and border of the #navigation equal 222px so to shift the #content over a further 20px to keep the spacing consistent we simply apply a left margin of 242px (222px + 20px).

Finally, we supply some straight forward styling for the #footer which is very similar to how the #header was initially styled.

#footer {
background-color: #66C;
padding: 10px;
border: 1px solid #000;
margin-top: 20px;
text-align: center;
}

Summary

And that’s it. If the navigation was quite large and was longer than the content then you would need to use a clear method to force the footer to drop below but for this example the #content quite happily forces the #footer to drop into position so it depends on your specific layout.

This layout works fine in Firefox, IE7, Opera, Safari and even IE6 without any hacks so feel free to use it as you see fit although a link to this site is always welcome ๐Ÿ˜‰


16 comments on “2 Column Fluid CSS Layout

  1. Dave Post author

    I don’t see why.

    There are lots of different ways to lay out a page using CSS and this is just one of the options that I’ve decided to explain.

    ๐Ÿ˜‰

  2. Ronald

    Hereโ€™s the 3 Column Fluid CSS layout that will be covered in the tutorial below.

    * 2 Column Fluid CSS layout

    3, 2 ? ๐Ÿ™‚

  3. Dave Post author

    Hi Ronald,

    Thanks for spotting that and letting me know. It was a copy and paste from one of my other articles.

    That’s now been updated ๐Ÿ™‚

  4. Jermayn Parker

    Thanks for pointing out the average problem for elastic layouts in using padding etc

    I have done that numerous times and gain quite a few gray hairs from it ๐Ÿ˜€

  5. Dave Post author

    Hi Jermayn. Yeah, I think we’ve all done it at some point especially when first starting out with CSS as it’s common place with tables to apply a width to everything which is a difficult mindset to switch out of when transferring to CSS and tableless layouts.

  6. Pingback: Dave Woods - HTML, CSS, Web Design » 3 Column Fluid CSS Layout

  7. Brian

    This is a top notch post because of its direct simplicity. Thanks.

    I use a kludged blogger template that functions OK, but my head is swimming because I cannot seem to understand the order that columns load. My sidebar loads first, causing a very poor experience for visitors. But when I try to flip the code around, the template gets screwy!

    How does this styling handle the load ordering?

  8. Dave Post author

    Hi Brian, The columns will usually load in the same order that they appear in the source code.

    In the template above, if you wanted the navigation to load first but appear on the right, you’d simply swap the float to right and change the margin on the #content div to margin-right instead of left and it should be that simple.

    Personally, I’d usually have the source code in the same order as the display so that anyone without CSS or using mobile devices will get the same experience as those using the latest browsers.

    Hope that helps.

  9. Bor

    Hi,

    This was a greate article!! I have however a problem when I try this demo. And I am hoping that you might solve that problem for me. ๐Ÿ™‚

    Problem: The footer-div goes behind the navigation-ul when the list in the navigation-ul is bigger than the text in content-div.

    Can you give me some advice, please?

    Best regards,
    Bor

  10. Dorothy

    Great post. I have been designing using CSS exclusively, but all of my designs are of a centered fixed width. I am going to use this tutorial to learn fluid designs.

  11. James P

    Hi, thanks for this great post. Is there a simple way to flip the narrow column to the right hand side of the page?

  12. Dave Post author

    Hi James. Yes very easily. Just change the float: left; on the navigation to float: right; and then change the margin on the content to right instead of left and it’ll switch the columns over without needing to change anything in the HTML.

    Hope that’s what you’re after?

  13. M Hutchinson

    I noticed that your profile in the grey banner near the top of the page doesn’t fit in the height of the row. Also, I thought it was best practice to hide contact email addresses due to spam ?