3 Columns From 1

15th September 2003 · Last updated: 5th October 2016


My latest demo explains two CSS techniques I used on this current layout* - 3 Columns From 1 + Link Icons.

*Update 7th June 2004: This post relates to a previous layout.

Comments (10)

Comments are locked on this topic. Thanks to everyone who posted a comment.

  1. Ben de Groot:
    Nice technique!

    One remark: there is no link from the article page to your main page!

    Posted on 24th October 2003 at 11:22 pm
  2. Chris Hester:

    Posted on 24th October 2003 at 11:22 pm
  3. Jim Davis:
    Checked the demo with Opera 7.21 with XP. The graphic at the top of the page shows a white rectangular box to the right of the image. The white box is not visable using IE6. Also, Opera 7.21 shows most nav graphics as red, turning to yellow on hover.

    A great demo!

    Posted on 28th October 2003 at 3:08 am
  4. Anonymous:
    Works fine with Safari 1.1 (Mac OS X 10.3)

    Posted on 20th November 2003 at 9:49 pm
  5. Michael Pierce:
    I was trying to put the finishing touches on my site's layout and was struggling with the best way to get a column to appear full length, without using images as many other 2 column layouts use. Your solution with the wide border was perfect!

    One improvement I have, though, is to set the column's background color to match the border color instead of just being transparent. This way, regardless of which column is longer, the column will retain its color. In your example, I would change it to : #right {background: #fae4c4;}

    Hope that makes sense!

    Posted on 19th January 2004 at 4:27 am
  6. jo jo:
    Nice, but where is the third column?

    I see only one wide left column and a narrower right column, plus two narrow (about 20px) borders on each side.

    I'd love to see really three CONTENT columns, possibly centered on the page and the 20 px border around the whole thing.

    Posted on 17th February 2004 at 8:03 pm
  7. Chris Hester:
    That should be easy enough - just make the left border as wide as the right, and add another column over the top.

    Posted on 18th February 2004 at 8:57 pm
  8. Stuey:
    Nice, but its an absolute sized layout.

    Can it be done as a relative "liquid" layout?


    Posted on 15th April 2004 at 1:24 am
  9. Lena:
    Nice layout, but it hacks in my IE 5.5 :(

    Posted on 8th September 2004 at 3:03 pm
  10. Hunox:
    Ya it breaks in 5.1 too. But it's a good idea to use borders for menu background. I always used images, but this method is better if you have one color bg! Good tip, thanks!

    Posted on 30th October 2004 at 8:51 pm