3 Columns From 1

15 September 2003 · Last updated: 27 May 2010

Comments

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

*Update 7 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 24 October 2003 at 11:22 pm
  2. Chris Hester:
    Fixed!

    Posted on 24 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 28 October 2003 at 3:08 am
  4. Anonymous:
    Works fine with Safari 1.1 (Mac OS X 10.3)

    Posted on 20 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 19 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 17 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 18 February 2004 at 8:57 pm
  8. Stuey:
    Nice, but its an absolute sized layout.

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

    cheers

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

    Posted on 8 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 30 October 2004 at 8:51 pm

Useful Info

EMAIL: www.designdetector.com (replace the 1st dot with "@")

RSS NEWSFEED: Subscribe to news of fresh posts and site updates. (RSS 2.0 compatible newsreader required.)

Disclaimer

Some links on this website lead to information provided by external services not under my control, therefore I am not responsible for the content or accuracy of the linked information.

All code examples are not guaranteed 100% free from bugs and/or mistakes. Use them at your own risk. I do not take any blame should a problem occur relating to use of code on this site given as an example for your own use. Such code has been tested and found to work for me, but I cannot vouch for other computer systems (existing now, or in the future) which it may be used on, or changes you introduce yourself based on my code.

This website is © Christopher Hester, except where separate authors are named. No part of this website may be reproduced or re-used in any way without my prior permission, except content added from separate authors (who retain the copyright on their material), examples of code, and any other content I explicity state is free to copy and make use of.

This page was last updated on 27 May 2010.

What's New

Recent Finds


View previous finds

Current Book Reading

Recently Read Books