CSS 3 column layout – the holy grail!?
February 5th, 2006I recently was surfing the web and found myself on a popular web standards zealot website. The featured article referred to 3 column CSS based page layout as being the ‘Holy Grail’! My first reaction to this was: geez, how silly this is!
…
Indeed, a simple thing like a 3 column layout is a challenge - when you don’t use tables. As such, you can find many articles on many web standards zealot websites that attempt to solve this problem. All of them falling short, all of them requiring the use of hacks – hacks that can break and WILL break.
IRRESPONSIBLE ‘EXPERTS’
The article in question, though recent, still advocates/demonstrates the use of a hack to get it to work with the most popular browsers … they don’t learn, do they?
I say this because a few months ago, it was discovered by the web community that many commonly used CSS hacks will break in the new, fully standards compliant IE7 … thus breaking countless web standards zealot website’s. So much for saving time and the myth of forward compatibility.
PEOPLE SHOULDN’T USE HACKS TO MAKE THEIR CSS WORK!
It gets me ‘hot under the collar’ when I see articles that promote the use of CSS hacks – this is bad practice for obvious reasons.
I’ve been warning about this for some time before the IE7 problem. None of these web standards zealots payed me much attention before the IE7 problem came to light; and now after this problem has been well publicized, it seems that these people still have their heads in the sand!
CSS FOR PAGE-LEVEL LAYOUT IS WEAK
Even in a perfect world, where all the browsers supported the standards perfectly, CSS page-level layout capabilities suck for many types of layouts … HTML tables are much easier to use.
That said, there is a CSS tables specification that works like HTML tables, but no browsers support it! There should be a ‘call to action’ to force browser makers to implement CSS tables.
Note:
Tables are grids, and grids are a proven tool for page layout that are used in programming languages (like Java) to create user interfaces. It’s about time that we web-nerds have access to this powerful and flexible system of page layout in CSS. For now, we can use HTML tables.
HTML tables may not be semantically correct, and they may bind your formatting to your page structure, but they will work in all browsers without the need for fragile hacks and they are really easy to use.
CONCLUSION
Web standards were created to make web design easier for web developers by having the browser makers build their browsers according to a standard specification – the web standards.
As soon as you have to work harder, and have to jump through hoops (use hacks) to make your pages work – the point of the web standards is lost. It makes no sense to try and force web standards (in ultra-strict terms,) unless the browsers properly support the web standards – they don’t right now.
I’m not a great fan of multi column layouts, I think the web isn’t a magazine and scrolling up and down sucks…
For stuff other than content I think its ok to have another column or 2 (ads, navigation…)
I entirely agree with above mentioned that now the browsers do not support the web standards. I had bitter experience while creating a web site completely based on CSS, it looked perfect in Internet Explorer and ugly in Mozilla FireFox, so what I want to say is that currently we move away from the real standards.
Tables are for data. Here’s a challenge – show me a table layout that couldn’t be done better in css.
Hi,
Read this:
http://www.killersites.com/blog/2005/what-are-css-tables/
Is this for real?
Does seperation of structure and presentation not mean anything to you?
"Does separation of structure and presentation not mean anything to you?" It does indeed! I’ve been a Java/J2EE developer for years and in our community, that has been recognised for years … years before the web design world clued into this … That said, I am just offering a perspective given out current situation: in a non perfect world, we sometimes have to implement things in a non perfect manner.
Heh, that’s pretty much as good of a response as you could have given.
Just because no obvious solution for css layouts exists, this doesn’t mean we should stop in our quest for the … Holy Grail? Arguably, if web developers didn’t constantly adapt to new css practices, there would be no pressure on browsers to also adopt them.
Well spoken guys…. one question tho’ if its too much of a hustle to sought out css for most browsers, would it be wise to stick to HTML tables FOR STRUCTURE and CSS for CONTENT? plz help!!
Whats the big deal with not using tables isn’t it easier? I mean I can do it in CSS but I have yet to really see why css is so much better then tables for structure. Wouldn’t a mix of both be quicker?
Now whats really funny is that I could’t even find one table tag on this page… However, I closely agree with you and this article, great job.
Having been a web application developer since 1997 (started on HTML in 1993 with vi and the Lynx browser) I completely agree with this article. Now I don’t build flashy, artwork heavy websites and don’t claim to be a graphics design expert. And yes, some of the layouts on csszengarden and other sites are aesthetically pleasing. But … I build web applications using Java, JSP, C#, and ASP.Net (plus a slew of other less used languages as well). Tabular layout of pages has always provided consistent results across browsers. Once we discover a better way (without hacks) that allows us to seperate layout from data then I will be all ears!
The solution to creating cross-browser CSS layouts is with (funny enough,) a non standard browser specific tool:
IE conditional comments.
I wrote an article about IE conditional comments (found in the blog) and they have been discussed on the forum as well
In a nutshell:
IE conditional comments will allow you to hide code from all other browsers, so you can write CSS code for IE only, without any of the traditional problems we had seen with other browser specific code; like Netscape’s layer tag for example.
I also have a collection of CSS templates that seem to work in all the browsers (including IE6-7) without the need for hacks – about 40 layouts.
But the code does use extra bits of HTML here and there, so your markup will not be 100% semantically correct – if that matters to you …
I will post the collection once I verify everything is clean.
Any word on the collection yet?
Yes,
I put together a web site template site at:
http://www.webshapes.org
.. Therein you will find a bunch of css templates with no hacks.
As a “old guy going back to school” in ‘99, one of my classes was on web design and your book, Killer Web Sites, was required reading. Read it from cover to cover many times with my new found love for building web sites. HTML and tables… had it all down to a t, fixed, liquid and all, even down to *gasp* Netscape 4. Along comes CSS and wow, now I can move my data at will, layer graphical elements without worry, add content much quicker than breaking items into td’s and tr’s, colspan’s, etc. Now, I didn’t jump right to CSS, because tables were pretty solid, once you learned the ins and outs… but, it’s the same for CSS. Once you know what to avoid, there is a lot to be gained. I understand the programming side, and such, but from a graphic web designer, CSS is by far the choice for me. Just thought I’d throw my two cents in… And thanks for the guidance early on in my career. Your book is still recommended reading in my mind.
Shawn,
Thanks for the positive remarks regarding the book, but alas, I did not write the book. You’re thinking of David … I’m Stef.
I took over killersites.com several years ago and all the content on the site is my own.
About CSS:
I thinking that table based design is not required these days. Still, my complaints about CSS hacks and the fact that CSS has a lousy model for page-level layout still stands.
CIAO
Stefan
I hear a lot of talk about design and function and standards, but I haven’t seen anybody mention useability.
I work with the disabled population everyday and nothing annoys me more than information that is inaccessible for everyone.
Standards, while you can groan and complain, are there for this purpose as well, not to make a webdesigner’s life easier (honestly, get over yourself!).
Next time you want to impress someone with an intricate table layout, try asking a blind person using a screen reader to test it for you.
CSS, while it’s not perfect, does what it’s supposed to do, separates structure from content and it does it for a reason.
I am using the Holy Grail as put out by Alistapart.com. My problem is, that when I use anchor tags to reference with in the same page once the anchor scrolls down, the content above it goes away and I can’t scroll back up? Now if I anchor back to the top of the page it’s fine, but since there are several areas where I used anchors that would be kind of redundant! Can anyone offer any help?
I too am in this quandry. It seems that everything in my css styles look fine……except in IE7. I hate the idea of using HTML tables, but it seems that I do not possess much of a choice, especially given that I have images that must fit in the right and left columsn with a width that is not my choice to decide.
Kat
Hi Kat,
Try using IE conditional comments:
http://www.killersites.com/blog/2006/ie-conditional-comments-video/
This will allow you to make the required changes to your layout (for IE 7) without affecting other browsers.
Stefan
A little late, but still…
This has been a problem for a long time now and it won’t be getting better any time soon; as long as people are still using browsers as old as IE5 (not many, but they are out there), hacks, conditionals (better hacks) or tables are the only options, at least for commercial sites.
But then there was a good point raised by oldog about usability, which takes tables back off the list. New browsers are forcing us to write new hacks, too. This is a bad situation to be in!
Tables and hacks, what’s the difference?
Using hack with CSS to make it work smoothly is not an ideal solution for sure.
Normally the questions for hacks come when the web-site doesn’t come out good in IE.
And the reason for this is Microsoft’s unwillingness to follow standards and of course users who du not keep their browsers up to date.
So what is the solution to this, apart from don’t care about stupid IE users with old insecure browser? Well on way is using tables. In my opinion this is also a kind of hack and no better than the “real” hacks used with CSS.
Using tables may solve some browser troubles, just like other hacks, but it will surly create new troubles when the need for change come sooner or later.
A “keep it simple” approach when it comes to layout will in many cases create the best user interface and make hacks and tables unnecessary.
And why should every web page run smoothly in prehistorically browsers or even in new browsers not up to the main standards?
It’s all about the audience that you want to reach. Yes, you can ignore the IE crowd and thus ignore about 60-70% of the traffic for most websites. It’s your choice.
You can use tables and have it work in all browsers but then you may have trouble with some hand held devices and if you want to change the structure of your pages you will have more work than otherwise.
That said, I think this argument is overstated because it is rare indeed that websites change their structure so fundamentally.
All this is moot these days: there are plenty of free to use CSS based web templates that solve the layout problems for you.
… That is to say that you DON’T need to use tables for page-level layout anymore.
Stefan