In search of the Holy Grail. True 2-3 columns CSS layout that works

Over the last few years a lot of noise surrounded the topic of semantically correct CSS layout. I decided to test this approach in my new site. Well... It was not so easy.

Each time I tried to make CSS layout it failed in one or the other browser. The easy way to make CSS layout is to use fixed width or proportional width (rated in %) for al columns. The goal, however, was to make two or three column layout with fixed width of left and right (if required) sides and liquid center area. It is very simple to make this kind of layout with tables. Attempts to implement it without tables, with pure CSS positioning are very painful. In real life, browsers are different and most of them have different interpretation of CSS rules. You can blame any of browsers (especially Internet Explorer 6) for wrong implementation of CSS standards. You can hate some of them, saying that Firefox is the only one that properly supports CSS. The reality is: you have to make your web design work for at least 3 major browsers- Firefox, Internet Explorer 7 and Internet Explorer 6.

I started my search and found this article: In search of the Holy Grail. It was very promising and convincing. Made prototype layout and checked it with Firefox and Internet Explorer 7. I was able to make it work pretty soon. Everything looked good until I checked it with Internet Explorer 6. Left column was disappearing or floating into central part. I tried to apply some hacks and conditioning some statements. Nothing really worked. After spending some time browsing endless comments for this article (more than 100 comments, mostly from suffering people), I realized that a lot of people have similar problems.

This design does not work. At least for me.

Made more research and found design that was relying on different approach. Multi-Column Layouts Climb Out of the Box . I tested it and it also had some problems. However, it gave me an idea of the pathway to follow. I was able to make working CSS layout after combining two of mentioned above layout techniques. It works for Firefox, Internet Explorer 7 and Internet Explorer 6. Check working example of this ‘semantically' correct CSS layout, used in Classic Adventure Literature site.

If you would like to look at the source code for HTML and CSS, use Firefox extensions for web developers.

Well… Semantically correct CSS layout!!! It works! But when I'm asking myself, does it really worth all these efforts or you can spent 1 minute and make the same layout with tables and without any pain. And mush more compatible with majority of existing browsers. The answer is: I don't know. I don't see any real advantages. It looks like CSS was not designed with proper support of layout technique. I would not be surprised if my CSS layout will not work in Opera or some other browsers. In general, I completely agree with author of this article: CSS 3 column layout - the holy grail!?

Add New Search
Write comment
Please input the anti-spam code that you can read in the image.

3.26 Copyright (C) 2008 / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."


We Are Hosted By

website tracker website tracker