My 3-column Nirvana

Finally it seems as though I've finished with my first larger CSS layout project. To rediscover the secrets of CSS I leaped into the work of creating my mandatory 3-column CSS design. I've worked with CSS designs in the past, but never created a CSS-only design, so this was meant to be sort of a "learning by doing" project. When starting I had some specific goals, most of which I think I got covered.

The main goal was obviously to create a three column framework that worked in all the major browsers (with IE5.5, Mozilla 1.6 and Opera 7.02 was suitable version targets), as well as ending up with a usable result in other browsers. Other than this flexibility was the major issue, both to style the end result but also to arrange the code in any desired way. I believe I've reached these goals!

The only thing I'm not entirely satisfied with is that I ended up with some browser specific coding1. After designing websites that served different output to different browsers for many years, one of the main goals of this project was to create one set of code that worked everywhere. I soon realized that this was next to impossible, at least for the pixel perfect layout I wanted, so I ended up using a hacks to differentiate between browsers. Especially I found this to be a necessity to get the header and footer rows to look/work as I wanted them to do. The hack I've used is devised by Tantek Celik and is widely known as the "Box Model Hack".

When starting the work with this 3-column layout I examined examples and ideas found around the web. After considering the pros and cons of several designs, I found that Rob Chandanais' method was a good starting point for where I wanted to go. As such "My 3-column Nirvana" is somewhat based on his "Three Columns - Flanking Menus" layout. Also I liked how he named page sections after the Greek alphabet (he names the his two navigational sections "Alpha" and "Beta"), so ever after viewing his code I've named my div's after the descriptive names of characters in the Greek alphabet.

The framework of the layout heavily relies on (a set of) div tags. I've tried to id all appropriate sections, while applying classes to everything else that needs special formating. After examining the first sketch and seeing the first "</div> </div> </div> </div>" in the code, I actually thought about renaming the design "Div-eXtreme ;)". Anyway, I've found it to be a really flexible method that gives a good overview of the code. Since I've found no pit-falls from using a high number of div's, I'll stick with it as my preferred method to slice up contents.

I've tested this framework on a couple of websites for some time now, and as far as I know it performs its tasks without any major problems. As a proof of concept I've tried to gather some screenshots from different browsers and platforms. They're all captured in 1024x768 resolution, and then reduced to 50% / 256 colors to conserve bandwidth. Click the thumbnails to view the larger version...

If you'd like to take a closer look into the code of the layout, without digging through all the other stuff that makes up my site, I've created a colorful example that should be helpful in understanding the methods I've used (the CSS is even included inline for easy access). To verify the code simple click the CSS (and XHTML) links found in the bottom of both documents.

Footnotes

  1. Although not part of the CSS-layout, for the end result of my site design I've also used these kind of hacks to utilize some IE propriety techniques. More specific I've used a couple of "DXImageTransform" filters (mostly gradients) while serving alternative styling elements (images) to non-IE browsers. Hopefully I won't be hanged for the usage of these IE specific features...
  2. When I started out I had no plans to create a design that worked in Opera 5 and 6, but it turned out to do remarably well in the olders versions. The only thing that really fails is the placement of the "logo images". So if you're planing to use this design in an enviroment with Opera 5/6 users, this is something you need to find a workaround for...

feedback

  1. Revised Nirvana

    • Just a quick comment to say that the code example has undergone a minor revision. There's couple of minor additions, but mainly the code has just undergone a cleanup to make it easier to understand...

      Please also note that if you plan on using the css, it would be vise to separate the css into two files. One with the code NN4 understands and one it should ignore...

    • Details:
      • Posted by
      • evirtus
      • on the 21st of May 2004 at 05:14
Add your comment
Info

In addition to the comment itself, a name (preferably your real one) and either your email address or website is required. Line-breaks will be identified and encoded, html will simply be encoded as text.

Please read the blog commenting policy, you'll have to accept it before posting. Any information you decide to share will be treated with the respect it deserves, as such your email address etc will not be shared voluntarily with any third party.

 
Contact details
 
Comment
 
Control
 

Couldn't generate page, however a cached copy was found and served on the 1st of January 1970 @ 00:00 in 0.031 seconds...

Errors occurred while generating this page... (More info availible)