3 Columns From 1
15 September 2003 · Last updated: 18 December 2006
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.
- 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 ¶ - Chris Hester:
Fixed!
Posted on 24 October 2003 at 11:22 pm ¶ - 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 ¶ - Anonymous:
Works fine with Safari 1.1 (Mac OS X 10.3) ¶ - 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 ¶ - 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 ¶ - 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 ¶ - 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 ¶ - Lena:
Nice layout, but it hacks in my IE 5.5 :(
Posted on 8 September 2004 at 3:03 pm ¶ - 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 ¶
Posted on 20 November 2003 at 9:49 pm
