November 12th, 2007 - by John Faulds

The two column layout is extremely popular amongst web page designs. It’s usually achieved by floating one column and then applying a margin wider than the floated column to the other column. This article will show a pretty cool alternative method. But you have to keep reading to learn it!

The Standard Two Column Layout

Before we look at my alternate method, let’s review a popular way of achieving a two column layout. At it’s most basic, you just float the first column left and then give the next one a margin-left wider than the floated column. Add in a small fix (or hack if you prefer to call it that) to counter IE<=6's 3-pixel gap bug and we’re done:

of1.gif

Example 1 (Click to View)

  1. .container {
  2.   border: 1px solid #000;
  3.   overflow: auto /* forces the container to enclose its floated contents */
  4. }
  5.  
  6. .sidebar {
  7.   float: left;
  8.   width: 150px;
  9.   background: #CC9;
  10.   padding: 10px;
  11.   border: 1px solid #F33;
  12. }
  13.        
  14. .content {
  15.   margin-left: 172px; /* move content away from the floated sidebar */
  16.   padding: 10px;
  17.   background: #FFE;
  18.   border: 1px solid #00F;
  19. }
  20.        
  21. /* fix for IE<=6's 3-pixel gap bug */
  22. * html .content {
  23.   height: 1%; /* triggers hasLayout */
  24.   position: relative;
  25.   left: -3px; /* move the element left to close the gap */
  26.   margin-right: -3px; /* add a negative right margin to fill the 3 pixel space left by moving everything left */
  27. }

What we have here is fine for a lot of situations. But it can prove troublesome if you have floated content in your right column (the one that’s not floated) which needs to be cleared. The easy fix for this situation is to clear whatever element needs to clear the preceding float with clear:both. But with the way our two columns have been set up, this fix doesn’t work – what we end up with is this:

of2.gif

Example 1.1 (Click to View)

As you can see, the content in the right column is clearing the content in the left column as well, which is not really what we want (this doesn’t affect IE<=6).

One solution to this problem is to float the right column as well. To do this we give the right column a width and float: right:

Example 2 (Click to View) (screenshot looks the same as Example 1)

  1. .container {
  2.   width: 800px;
  3.   border: 1px solid #000;
  4.   overflow: auto
  5. }
  6.            
  7. .sidebar {
  8.   float: left;
  9.   width: 150px;
  10.   background: #CC9;
  11.   padding: 10px;
  12.   border: 1px solid #F33;
  13. }
  14.        
  15. .content {
  16.   float: right;
  17.   width: 606px;
  18.   padding: 10px;
  19.   background: #FFE;
  20.   border: 1px solid #00F;
  21. }

And now our right column content appears where it should. (Note that we can do away with the fix for IE’s 3-pixel gap in this example because the bug doesn’t affect adjacent floats.) But to accomplish this, we had to give a width to the right column.

What if we want to create a fluid layout where the layout expands to fill the entire window? We’d change the width on .container to 100% (or just leave it out as it’ll be 100% unless we specify otherwise), but we can’t change the width of .content to a percentage value because we don’t know what that’ll be, as the space left over after removing the space taken up by the left column (150px width + 20px horizontal padding + 2px borders = 172px) will vary depending on the window size.

We could change the width of the left column to a percentage to make our calculations easier but that doesn’t help us if we want a fixed-width left column (and will also never be completely accurate if we want to use borders to which you can’t apply percentage values).

The answer in this situation is to not float the column, but to use the overflow property instead. Using overflow makes the element behave in a similar way to floating it — in the way that it treats floated content contained within it, but without having to specify a width.

Example 3 (Click to View) (screenshot looks the same as Example 1)

  1. .container {
  2.   border: 1px solid #000;
  3.   overflow: auto
  4. }
  5.            
  6. .sidebar {
  7.   float: left;
  8.   width: 150px;
  9.   background: #CC9;
  10.   padding: 10px;
  11.   border: 1px solid #F33;
  12. }
  13.        
  14. .content {
  15.   overflow: auto;
  16.   padding: 10px;
  17.   background: #FFE;
  18.   border: 1px solid #00F;
  19. }
  20.        
  21. * html .content {
  22.   height: 1%;
  23.   position: relative;
  24.   left: -3px;
  25.   margin-right: -3px;
  26. }

(Note that we need to reinstate the fix for IE’s 3-pixel gap that we removed from the previous example because this time we’re not dealing with adjacent floats even though they display some similar characteristics.)

Something else worth noting is that the overflow property not only affects the overflow of the content of the right column, but also that of the left column in this example (note the first line of text in the left column):

of3.gif

The first line has had all the spaces removed making it longer than the space available for it (a similar effect would be achieved with an image wider than the column). In most browsers, the part of the line that is too long gets hidden. IE<=6 incorrectly expands the column's width to contain the content. Adding position: relative to the first column will bring the content back into view in the browsers that hide it, but this means that it would then overlap the content in the right column (which is the same effect as using the large margin-left method).

If you never deal with user-generated content, then this sort of issue isn't one you're likely to face very often, but I think it's preferable to hide the offending content from view, rather than have it overlap the other column and potentially make the content of both columns either partially of fully inaccessible. The only situations where this would occur would be images that are too wide (in which case, missing the part that is too big for its space is unlikely to be a great loss) or long URLs (and here too, missing part of the link text is unlikely to be a problem as part of the link would still be clickable).

The scenarios described above may not occur that often but hopefully the use of the overflow property instead of margins or floats will help solve some problems. There may be other ways in which overflow can be used when creating column layouts that other people may have discovered.

John Faulds is a freelance web and print designer based in Brisbane,
Australia who writes the occasional article on CSS/HTML, accessibility and
other web development related topics at Tyssen Design.
Be Sociable, Share!

8 Responses to “Two Column Layout With A Twist”

1 dougwig

For IE, word-wrap:break-word (CSS) works well as a rule to prevent long URLS and unusually long strings from breaking the layout. It’s also fairly easy to insert word-break elements <wbr/> into long strings using regular expressions and either javascript or server-side code.

2 Anna Vester

Great Information. I am going to stumble this.

3 Golgotha

Good one John, I didn’t know about this method.

4 Ian

A very well written article, I’m sure it will come in handy at some point.

5 Paul OB

Good article John :)

It’s worth pointing out that the same technique can also be used for the middle column of a 3 column layout (which also leaves the possibility of the side columns being absent without needing to change the CSS at all).

6 New Tampa Homes for Rent

Thanks for sharing this technique… I was trying to implement a two column layout with a floating right column while also having a min. and max. page width. Had all sorts of problems until I read this… thanks!

7 Ogłoszenia Mielec

Thanks for very interesting article. btw. I really enjoyed reading it. Very good technique.

8 My CSS is Cat -(categories with css)

[...] all these problems quite easily. (As an aside this method was also exploited earlier in one of John’s Articles.) If we once again use overflow other than visible on this content we can make it form a [...]

Share your thoughts...

mulberry sale spyder womens jacket cheap new balance 574 mulberry outlet cheap new balance 574 arcteryx outlet mulberry sale spyder womens jacket mulberry sale spyder womens jacket mulberry outlet mulberry outlet new balance 574

Popular Articles

Top 10 Commentators


Subscribe to this feed! Subscribe by Email!

Random Bits Podcast

You need to download the Flash player from Adobe

Blogs Worth Reading