Useful Info
EMAIL: www.designdetector.com (Replace the 1st dot with "@".)
RSS 2.0 NEWSFEED: Subscribe to news of fresh posts and site updates.
Follow me on these sites:
500px deviantART Flickr Facebook SoundCloud Twitter
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 them.
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 my code from 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 it working on other computer systems, or following changes you make yourself to the 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 for content added from separate authors (who retain the copyright on their material), examples of code, and any other content I state is free to copy and make use of.
Comments (10)
Comments are locked on this topic. Thanks to everyone who posted a comment.
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 ¶
Fixed!
Posted on 24th October 2003 at 11:22 pm ¶
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 ¶
Works fine with Safari 1.1 (Mac OS X 10.3)
Posted on 20th November 2003 at 9:49 pm¶
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 ¶
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 ¶
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 ¶
Nice, but its an absolute sized layout.
Can it be done as a relative "liquid" layout?
cheers
Posted on 15th April 2004 at 1:24 am ¶
Nice layout, but it hacks in my IE 5.5 :(
Posted on 8th September 2004 at 3:03 pm ¶
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 ¶