Sponsored by Travelzoo
Take Advantage of Ridiculously Low Holiday Airfares view!
travelzoo.com - Flights $52 and up for Thanksgiving, Christmas & New Year. But move on it now.
65 Comments
- jimboquick, on 10/12/2007, -0/+3I digg because CSS is the right way to separate content from layout and any effort to move this direction is digg-worthy.
- csimpkins, on 10/12/2007, -0/+2"CSS is highly flawed. XML is just dandy for me"
One describes formatting, and the other describes data structure. They aren't exactly interchangeable... - Greg-J, on 10/12/2007, -0/+2It's really not the Holy Grail. The Holy Grail would allow for all three columns to be the same height as the tallest column without the need for javascript.
I think people need to get off the collective nuts of ALA. This article isn't anything special or anything that hasn't been done before actually.
What's even funnier is that you can STILL make a more fluid layout with a table that degrades better than this technique. - Paul, on 10/12/2007, -0/+1"There's really no reason for this to replace well-organized tables."
Dude do you make posters in Excel? - v3xt0r, on 10/12/2007, -0/+1btw: for heavy traffic web sites, you should still use Tables for layout.
if you have a site that gets 1,000,000 hits/day, and of that 1m hits, 2% if the audience uses a browser that does not properly render CSS, then you have just made a horrible impression on 20,000 visitors.
CSS-based layouts are a great way to develop, but until browsers can catch up to par, it's not worth my time trying to bounce between browsers, when I can perfectly achieve the intended results in HTML4. - Blizaine, on 10/12/2007, -0/+1the pic on the website looks more like the holy thrown.
- ilovenicotine, on 10/10/2007, -0/+1down at the bottom it explains how to make all columns the same height with only CSS, RTFA
- trnelson, on 10/12/2007, -0/+1Also, to add to my point - the ability to define styles for screen readers, and for print, make CSS the more friendly (and flexible) choice as well.
Have you ever tried to view either type of site in a text-only browser such as Lynx, or a screen reader?
Sure, a lot of our audience may not be visually impaired, but consider just how much surfing the net sucks for them when all they hear is "begin table, begin table row, begin table cell ..." for 10 minutes just to get to the content. - obenson, on 10/12/2007, -0/+1Having just installed the new Beta of IE7, I have confirmed that the main layout discussed does not work in IE7. However, the "wrapper-free Holy Grail" mentioned very near the bottom of the article does work in IE7 (it starts to fall apart if you make the browser very narrow but you do wonder why anyone would make it that narrow).
- SilentBobSC, on 10/12/2007, -0/+1"1) Open GoLive CS2
2) Drag CSS component onto blank page
3) Done."
Replace step one with "go buy a copy of Dreamweaver" :))
SB - Paul, on 10/12/2007, -0/+1"You can say tables weren't meant for page layout, but highways weren't meant for you to drive on, either. The internet wasn't meant for you to make websites, and silly putty wasn't made for you to play with."
You are absolutely correct, the web is an evolving technology, CSS is a step.
A step in the right direction…
A way to organize and display data appealingly.
It may be flawed but it IS the next step.
Unfortunately it’s being held back by MS. Someday it will evolve and become the true power that it should be or a new technology will pass it by but for now it’s the place designers have to go before we figure out a better way. - vermin, on 10/12/2007, -0/+1"CSS is highly flawed. XML is just dandy for me."
lol you obviously have very little experience in web design. You don't have to use XML for a table based layout, or for a CSS based layout. Are you referring to XHTML? If so, again, you can design a CSS based layout using XHTML just as you can design a table based layout with using XHTML. The fact that you think XML is an alternative to CSS really highlights your ignorance of the issue. - faxxy, on 10/12/2007, -0/+1Remember the days of spacer gifs? The misery.
- SilentBobSC, on 10/12/2007, -1/+2@Berean - I'm a bit lost by your argument, I have not come across any site that uses XML to handle their layout... XML is if anything, referring to a self-describing data structure. I'm sure you could probably rig it up to handle layout, but it seems it would be a major hassle when CSS is being adopted by every browser... If you could provide me with some XML-style based sites, I'd love to work over the code though. Also, you're support of table-based layout really doesn't help your argument. Just sayin...
SB - trnelson, on 10/12/2007, -0/+1I did table based layouts for about seven years, and I've been doing CSS layouts for about a year and a half now. CSS is the only way to do it, period. Tables don't provide any flexibility (ever been to www.csszengarden.com? If not, I suggest you take a good hard look in a standards-compliant browser). Also, table-based site redesigns are a nightmare.
Just because MS can't get their crap together and meet w3c standards doesn't mean CSS should be overlooked. Microsoft doesn't even patch their browsers to meet the standards - that's something I'D like to see. That's where Firefox has them beat, just updates and patches to meet standards and security issues, not a new version every 15 years that doesn't even meet standards when it comes out.
Don't get me wrong, I don't hate MS, I'm a .NET guy; I just hate how they do things their way and people follow in droves - how many poor souls are still running Windows 98 and viewing sites with IE 5 - a browser that is almost eight (8!) years old.
As web developers we're creating software, however you look at it. I don't expect to run Call of Duty 2 on my Pentium2 with 32 megs of RAM, and I don't expect anyone using IE5 to view my site, period. - debtman7, on 10/12/2007, -0/+1In some ways I miss the era of table layouts... Let's face it, they were a fair bit easier. Your table layout usually didn't render differently in various browsers (of course, there were far fewer browsers back in the day) and didn't require hacks to work around CSS bugs. There weren't complicated rules, oddities to get around, bizzare issues like why does your float: right div have to come first in the html code, etc.
On the flip side, CSS is nicer to work with. Your source pages are clean and simple, and can be massaged into various formats with a simple style. It's great for screen readers and text only browsers, there's no extra cruft to get in the way. It's elegant and flexible. If it weren't for all the damn rendering glitches, bugs and lack of standard support, it'd be ideal!
As it is, a pure CSS site takes more effort and knowledge than a good old table site. Still the right way to go, but it can be a pain to figure out why one browser is doing something weird. Often you end up modifying your design to get it to work, after frustrating hours of trying to find a workaround. Such is life... I figure by the time CSS is well supported and works the same in every browser, the next big thing will have come along and will start the cycle all over again... - ColdDimSum, on 10/12/2007, -0/+0One reason I don't want to use a table is maybe I don't want to have 3 fixed columns, I want N 3-inch columns where N scales with the viewable area dynamically. And maybe that *I* is the document viewer and not the document publisher.
Imagine if you would, a world where every web page could be easily (and very powerfully) 'skinned'. Where the viewer has as much control over the presentation as the author (if they so choose).
I remember talking about CSS back in '92 and it's pretty sad that we don't have a clean, solid, powerful CSS specification and wide-spread (correct) implementations. Semantic markup is so much more powerful in the long run. Sadly people have taken the short-cut again and again and again so we still languish in the informational dark ages.
Doesn't help that the output from web editors is horrific at best, I almost pity the programmers for the major browsers (if they weren't largely to blame).
And why don't web browsers have editing & publishing functions built-in like, oh I don't know, maybe the first web browser?
Personally, I think a small group of really smart people should sit down in a room for 2 years and do it all over from scratch and get it right from the ground up. With some decent conversion tools I think there is still room for a 'web takeover' if they offered the right combination of editing/publishing, strong semantic markup with a heavy dose of professional-style presentation controls. I wouldn't have to be a complete write, I do believe that something very close to XML is a good markup solution. CSS I would throw out and start over from scratch, doing it XML-based (one language to rule them all?).
Meh... back to the drudgery I guess... - Track40, on 10/12/2007, -0/+0Very Nice. This couldn't come at a better time, as I'm currently in the painful transition from table-based layouts to XHTML+CSS-based tableless layouts.
- reynhout, on 10/12/2007, -0/+0@innate:
"Shouldn't layout rules be getting easier, not harder? I really want to like CSS but there's a lot of weird math necessary for what is basically a "...(table markup omitted)...
Yes, it should. And if MS would implement column-count and column-gap, it really would be that easy.
IE finally has a development team on it again for the first time in several years. This only happened because of Firefox. Maybe IE7 will a good browser, maybe it will be the browser they should have released in 2001. We'll see.
IMHO, anyone doing layout with tables needs to have a very very good reason for it. Otherwise it's just laziness, lack of inertia, etc. IE5 is not a good reason.
Anything site that requires support for browsers predating IE6, FF-current, and Safari-current should be implemented as a WAIS or a gopher. - MartinAmsterdam, on 10/12/2007, -0/+0here's a IE7 articles which explains MS does not support * html as a CSS filter in the future.
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/cols/dnexpie/ie7_css_compat.asp
However, besides "promisses" I do not see a way to get IE 7 to read this properly. What did work is simply copying the IE bugfix to the #left tags. but I'm sure the css won't work on the proper browsers if you do that..... anybody have any ideas? - diskopo, on 10/12/2007, -0/+0Yeah this is a great article that I read in, I think 2002. Good to see it again though. The layout's changed since then too.
- seventy5, on 10/12/2007, -0/+0Very interesting
- paularms, on 10/12/2007, -0/+0It's been done.
- csimpkins, on 10/12/2007, -0/+0It doesn't work in the IE 7 beta either.
- geminitojanus, on 10/12/2007, -0/+0Good content, but I don't get the idea behind the Holy Grail...
*shrug* - jozzua, on 10/12/2007, -0/+0I've actually tried to implement this as a Wordpress theme.
http://www.isulong-seoph.net/2006/06/14/i-present-to-you-isulong-seoph-wordpress-theme-v1/
Making it work compeletely for Internet Explorer gave me such a headache. - appdx, on 10/12/2007, -0/+0That's a good article! +digg!
- vermin, on 10/12/2007, -0/+0Nice article, but the layout fails in IE 5.x
Soon though, people won't have to support IE 5.x but at the moment it's still being used enough to make it a requirement. - inactive, on 10/12/2007, -2/+2"Dude do you make posters in Excel?"
Dude, no? You can say tables weren't meant for page layout, but highways weren't meant for you to drive on, either. The internet wasn't meant for you to make websites, and silly putty wasn't made for you to play with. Try another argument. - Keloran, on 10/12/2007, -0/+0http://www.developersdigest.org/wiki/index.php/Holy_grail_three_column_design
much better way of doin it imo (well i would say that since i wrote it) - carlheinz, on 10/12/2007, -0/+0Fantasti!
- c-nug, on 10/12/2007, -0/+0Not that I'm using the resolution, but this format makes people using 800x600 have to scroll sideways to see the right bar.
- c-nug, on 10/12/2007, -0/+0OK, forget my previous comment, I am an idiot.
- inactive, on 10/12/2007, -0/+0first of all, this seems pretty old to me... second of all, it doesnt work in several IE's... no digg
- innate, on 10/12/2007, -0/+0To change the nested tables from a right-column set of ad tags to a horizontal banner-style would not be very hard to do. The total effort to design the tables once, and then re-design it (several times) is probably less than coming up with the equivalent CSS just once. Hence why "recipes" like this one are so popular; few people have been able to figure it out on their own. I'm no CSS-hater — I like the semantic idea — I just want the effort to be lower. Someone simplify CSS please!
- ColdDimSum, on 10/12/2007, -0/+0cleaner and easier to use, possibly/probably harder at the bottom to code in a reusable fashion.
Which is easier? a bunch of nested tables with a fairly fixed and limited presentation or something that references a pre-coded style-sheet and a small handful of div tags where you can later simply reference different style-sheets and get completely different layouts (basically allowing your web page to be skinned).
How much would your nested table web page have to change to switch from a right-column set of ad tags to a horizontal banner-style? The (properly coded) semantic web page wouldn't change in structure at all.
*dreams on* - innate, on 10/12/2007, -0/+0(2nd try)
Shouldn't layout rules be getting easier, not harder? I really want to like CSS but there's a lot of weird math necessary for what is basically a <table><tr><td colspan="3" /></tr><tr><td /><td /><td /></tr><tr><td colspan="3" /></tr></table>. - innate, on 10/12/2007, -0/+0Shouldn't layout rules be getting easier, not harder? I really want to like CSS but there's a lot of weird math necessary for what is basically a .
- elroy, on 10/12/2007, -0/+0Rollie Theodore Sakers is a big fan of eliminating semantic blockage.
http://rollietheodoresakers.bravehost.com/RANTINGS.html - sailor, on 10/12/2007, -0/+0Were did the idea that tables should not be used for layout?
- eisa01, on 10/12/2007, -0/+0Those of you still babbling about using table for layouts should really take a look at this presentation:http://www.hotdesign.com/seybold/
- stickmanlabs, on 10/12/2007, -0/+0Wow, really guys, before you boast something make sure it works.... and is truly flexible. This is another case in which someone coined a useless meaningless term to get hype.
This layout fails in IE, which as most of you should know is 80%+ of our demographics..... enough said. - SenyWD, on 02/24/2009, -0/+0Download free standards compliant CSS layouts: http://www.free-css-layouts.com
- DannyB, on 10/12/2007, -0/+0old post?
- UmbillicalEd, on 10/12/2007, -0/+0I get the same thing in XPSP2 with Firefox 2.0.
Anybody know a workaround? -
Show 51 - 70 of 70 discussions



What is Digg?