1 Good Article, Dan

This is one of my favorite tricks. Nice to see it written up so I have a place to refer people to when they ask now.

posted at 10:30 am on January 9, 2004 by Mark Newhouse

2 Great work!

I just wanted to say that as a technique this has worked very well for me and I don’t really see it as a hack. In fact, it could be a good way around some nasty CSS hacks.

I also wanted to compliment you on a very clear and easy to follow article Dan.

posted at 10:34 am on January 9, 2004 by Keith

3 That means fixed width

As far as I understand this trick, it depends on the column content staying a fixed width (in pixels). Most of the time the content will be text, and as different fonts and font sizes will be used in display (you can’t control it!), such a design might break or become inaccessible for some users.

Column widths should preferrabley be defined in percentages or “em“s, if the content is text.

posted at 10:36 am on January 9, 2004 by Bertilo

4 re: That means fixed width

Bertilo, funny you should mention that. See this week’s other fine article, ELASTIC DESIGN by Patrick Griffiths, for ems-based layout techniques.

Dan, as I mentioned, I get asked how to do this at least twice a day, and never have time to respond. Now I can simply point to your article. Thanks a mil!

posted at 10:42 am on January 9, 2004 by apartness

5 Not just fixed-width

Good description of the technique, Dan. It’s worth noting for Bertilo and other’s sake that the technique, with a little fore-thought, can be easily applied to liquid layouts as well.

One needs simply slice the background image into a smaller chunk (specifically, only the background for the coloured column that should tile). Applying this as a background image to a container element (body works, but it’s generally more effective to use a special div) will allow the same net result, without limiting the other column to a fixed-width.

Yes, even this way the coloured column is limited to fixed-width. If you wish the repeating column to be flexible as well, time to consider a transitional layout using a table.

posted at 10:53 am on January 9, 2004 by Dave S.

6 backgrounds used with fluid layouts

Pixy posted this example of using background images in fluid layouts.

http://www.pixy.cz/blogg/clanky/css-3col-layout/

I have used this on occasion and it worked wonderfully.

posted at 11:04 am on January 9, 2004 by Jeremy Flint

7 Old ALA

There are many ways to do this, some, like the old ALA CSS layout, used a body background colour that was the same colour as the short column. When the short column ended, the colour continued on, as the body background colour was showing through.

The “main” column/div had a different colour, and was guaranteed to be longer than the “menu” column, thus never showing the body background colour.

I’ve used that method on several sites, and it allows for a more elastic design

posted at 11:19 am on January 9, 2004 by CM Harrington

8 Fluid layout, 3 columns with header and footer

I think the things start getting trickier if you want three columns. Especially if you want them to be fluid, with a full-width footer at the bottom.

A while back, I had created an example for doing this. The left and right columns were floated. This was required as I didn’t know a-priori which coulmn will be the tallest.

The idea I used for “div stretching” was to wrap the contents within a div. For the wrapping div, I used a background y-repeating image to “stretch” the left column (just like Dan explained) and gave a background color to “stretch” the right column. I then gave the central div a background color.

To ensure that all the three columns “stretch” to the length of the tallest column, I inserted a “clearing” div at the bottom of the central div. The “clearing” div is just an empty div, styled as “clear: both” to ensure that the central column stretches to the fullest and that there is no peek-a-boo for the background of the wrapper.

You can look up the example at
http://www.prism.gatech.edu/~gte207x/examples/pyro.html

[The example above is “minimalistic”.]

posted at 11:21 am on January 9, 2004 by Niket

9 background images are back

I remember using this technique back in 1997 in html 3.0 to make a left column. I am sure everyone remembers those websites, the “paper torn edge” columns or wood texture columns. After learning different ways to do achiever columns in HTML I never thought I would need to return to it again until xhtml/css layouts came along. Anyways, great article on this technique. I noticed that is how ESPN.com creates their columns.

posted at 11:49 am on January 9, 2004 by Blakems.com

10 Going liquid...

Nice and clean Dan, well done!

For a fluid take on this method (and there are a lot!):
http://www.positioniseverything.net/threecolbglong.html

In a sense what Dave S. was getting at above.

posted at 12:24 pm on January 9, 2004 by Mike