140 Reader Comments

Thanks for the article, it will definitely help to many people. I’ve already used negative margin in order to create a two-column layout with the equal height but didn’t think to use it with the three-column layout ;)
As you said: Think “outside the box”! Thanks again.

Nice solution. But i think it’s not usable in real-life, because of less browser-backwards-compatibility. for example ie 5.5 and less crashes the layout… it workes fine in FF 2.0, IE 7.0, IE 6.0. but thats poorly not enough…

Interesting idea, not sure it would work if you use blocks that have white space between them though. Maybe it’s my cold, and I’m just not looking at it the right way, but hopefully this will get me going in the right direction. A very interesting article none the less!

Opening a keylock with a paperclips is an ingenious and spectacular magician’s act. But would you seriously buy such a lock?

Using negative margins is an *unintended* use of the standard. Boxes don’t have negative margins. How a browser handles them is not a bug but an implementation choice (a respectable one being to simply ignore out of range values).

A standard defines what can be done, but also *what should not be done* (even if it can be done). This is where many css techniques abuse the standard.

I think this is a real issue. As a newbie, I buy solutions such as this one, thinking that I am investing in a solid foundation. Then I try to add a menu or an image or even a simple italic, and have no clue why things suddenly mess up.
As it dawns to me that I am really investing in implementation exploits, I am ready to throw away this whole css mess altogether. Now that would be an unintended consequence?

My apologies if this sounds as a harsh critique on this work. It is a superb solution to a real problem. Only it requires a magician to make it work in daily life.

Still the left rail of
http://www.alistapart.com/d/multicolumnlayouts/2ColLiquidLeftRailTallestHeaderFooter.html
isn’t liquid: it isn’t elastic in its width.
http://borumat.de/bilder/screenshot-temporaer/hc-134.png

If a long leged (e.g. a long word in a zoomed specific font-size) doesn’t fit into that bed, his leg will hang out - into another bed.

The width of a column in a classic two-column-table-layout is elastic.

Fred Reisac: Negative margins make perfect sense and aren’t “unintended”:http://www.w3.org/TR/REC-CSS2/box.html at all. They consistently do exactly what you’d expect them to do, which is the opposite of what _positive_ margins do; where a positive margin would normally create space, a negative margin will consume it, with the same overlapping rules applied as always. This is the same both vertically and horizontally.

Admittedly, the rules surrounding negative margins and floats are a little strange, but they _are_ consistent cross-browser, and have been since before IE6. (I haven’t tried yet, but I expect that with little difficulty this layout could be made to work on IE5—there’s nothing here that scares it under normal circumstances.)

Fredrik, you can achieve whitespace within your columns by simply imbedding a div in each column. In this example I am going to call each of these embedded div’s <div class=“content”> and then in the style sheet give these some margins or padding:

This complete aversion to tables is going too far, if you did this using a table it would be very simple with perfect behaviour, no need to jump through hoops.
with tables you can:
get a footer that always stays on the bottom, center content on both axis and get columns that grow and shrink together.
just don’t let the CSS police catch you doing it.
Tables are back baby.

Maybe I haven’t spent enough time looking at it, but I don’t see an obvious solution for an elastic layout where the first block is not centered. I typically use a design in which the a left aligned navigation is the first block within my wrapper element, and the other element is the content div.

Yes, I’m aware that placing the content first may have result in better SEO, that my clients will probably never notice the difference if I switched it, and that I can just have hidden “skip to [x]” links for those that need it with CSS turned off, but I still disagree with putting content before navigation. To me it does not make sense semantically for a document to have navigation show up after the content. Maybe others here will disagree with me on this, but that is my believe.

That said, I do find this a wonderful technique that I *really* wish I could convince myself to use. If I’m ever in a situation that I feel allows it, I will try it out.

To be entirely accurate, the web accessibility content guidelines do not preclude using tables.

At priority 2, it says “5.3 Do not use tables for layout unless the table makes sense when linearized. Otherwise, if the table does not make sense, provide an alternative equivalent (which may be a linearized version).” and “5.4 If a table is used for layout, do not use any structural markup for the purpose of visual formatting.”

Not that I’d recommend using a table to lay out the page, but it’s good to be accurate.

If you can avoid using tables for layout, fine. but if the alternative is a 10k stylesheet full of hacks, then just use a frickin table, i’m pretty sure God(w3c) isn’t gonna come down from heaven and stike you dead if you do.

Thanks for the tip! It provides an elegant and flexible solution for many common layouts.

Two or three columnd based layouts are so common that a single element containing the various columns (essentially the gutters on either side of the road) is the right approach. Using negative margins sounds a bit weird but, if I think back to my school exercise books, this is exactly what margins are for.

As for the age-old table vs. non-table layout: go with what works for you and what your comfortable with. Personally I don’t think tables (row-based) should be used for laying out a page but there may be situations where they provide the best solution. I don’t think anyone would say CSS is perfect yet and the browsers certainly aren’t.

The only progress I’ve seen so far since 2001 is that box of tricks to get CSS to create obvious layouts has become more “sophisticated” and that 7 different solutions to the same problems are offered.

It is time the CSS spec AND the browsers do move on. I’ve a hard time defending this kind of trickey against the why-use-css-when-a-table-works-perfectly crowd and to be honest I’m pretty tired of defending (for all the right reasons like accessibility and the ability to rework the layout without touching mark-up).

Now, if ALA could produce another flaming pamphlet like the ‘to hell with bad browsers’ article, but this time directed against the W3C, browser makers and short sighted managers at the same time, maybe we get to use CSS3-like simple grid commands that will work everywhere the same way.

It’s rediculous that so much effort and money is spent on working around something that should have been solved in 2002 and would so much benefit everyone: webdesigners, web design tool makers, web browser makers and users.

What is so wrong with using a table to layout 3 columns? Someone please answer this. It aint worth it till CSS gets its act together and browsers agree on it 5-10 years from now.
Advantages of using table…no hacks, scales, no crazy css tricks for each and every browser, way less time and energy spent developing it, it just plain works…you css people are like jesus freaks and obviously never designed web pages for large scale websites and paying clients. In theory it sounds pretty, but it just is not practical to use pure CSS for a whole public facing website.

This is a perfect example of when IT IS OK TO USE TABLES. Would you seriously trust this mess of hacks and negative margins over a simple HTML table? There’s no disadvantage, and you KNOW it’s going to work.

It never ceases to amaze me how fervently the folks who want to do it the easy and familiar way (i.e. tables for layout) impugn doing it the standards-based way.

It’s true that there is no explicit rule against using tables for layout. But it you can create your layout without tables, you gain some great benefits including: a more flexible design that is easier to maintain and change, a smaller file size that saves space and bandwidth, and if you markup your content semantically, better SEO and accessibility.

Another benefit is derived for database-driven dynamically generated sitees. It takes less processing time to generate the simple markup of a CSS-based layout than crunch through multiple layers of nested tables.

The only justification the tables-based advocates can give for using tables is that it’s easy and it works. That’s true. But if I’m interviewing you and the only work you produce is tables-based, I’m not going to hire you.

Some people have to use tables, some people refuse to. The people who don’t use tables are generally doing it for philosophical reasons which will eventually advance the field we all work in.

The people who use tables are generally working under a budget, a time crunch, or a mountain of frustration.

Both sides of this debate generally have good, solid reasons for what they do. So leave the evangelists alone, because their perseverance will make our jobs easier and better one day. And leave the tables guys alone, because they’ve got clients and companies they’re accountable to.

Now christos, come here and give ‘Htmler Tabler’ a big hug. Thats right. Now you two go and have a good time. Crazy kids. So cute.

Use tables for layout if you want but shutup! I “grew up” with HTML tables back in the 1990’s when getting tables to work with the various browsers really did matter and really was hard work. My first CSS project to do layout without tables was very hard but I’m glad I went through it and I wish we’d had CSS earlier even if it is quirky and browsers have to put up with table-based layouts. As far as I’m concerned - the less ML of any kind we have the better.

Back to the article: for those coming to CSS with a table layout approach this will be a godsend.

“But if I’m interviewing you and the only work you produce is tables-based, I’m not going to hire you.”

I don’t think anyone here is talking about using tables exclusively; the work I produce is 99% CSS for layout. But _in those circumstances_ when you get to the point where you’re spending 6 hours trying to get CSS to do what you want, it’s a little irresponsible not to be practical. It’s hack A vs. hack B.

I change at present time my website over to a similar CSS approach. It is attapted from Dirk Jesse, he calls his approach YAML (yet another multicolumn layout). It does not use Javascript.
The beauty about his approach is that it is backward compatible and useable with older browsers. It takes very much in consideration any kind of browser available.

Not everyone is using the latest browsers like us.

When one starts to use an approach like you did, the older browsers start caughing up very fastly and the results are not that beautiful and then a lot of hacking has to be done, but even the new browsers are handling CSS sometimes differently.

I also believe that a flexible layout is the future, which means one defines a min and max width, so the user regardless, if he uses a 15inch sreen or a 24inch screen gets the website in a nice way presented.

Never thought that this would happen again. Welcome to the year 2007, folks. We have a layout-tables vs. CSS discussion. Again. Thanks, “Reid”:http://www.alistapart.com/comments/multicolumnlayouts?page=4#33, for clearing it up.

Please, let’s get back on topic.

I haven’t been convinced by any of these solutions, and this includes this new article.

I am also not convinced there is a need for three-columns-layouts on the Web. Not because it is hard (or impossible?) to make them work with CSS alone, but because I simply think, well, there is no need. I don’t like it when my eye gets disoriented by too much clutter on the screen.

But then again, I produced websites under the label “puredesign”. There’s no accounting for taste.

I’ve been dealing with liquid layouts a long time, and yes, this IS a solution, but what about the navigation order? It’s more natural to have the link index (usually on the left-side column) first than have the center column (the page content) at the top of the page.

Think it as a non CSS page, or disasble CSS on the browser to see what I mean, navigation without an index really sucks.

when you really think about it, there’s a lot of overlap between what css does and what javascript can do. I heard once of a script that let you target elements in the DOM via css syntax in Javascript. I think that’s brilliant. But I also think a few more useful things need to be taken from Javascript and added to CSS to make them more user friendly and javascript independant.

I’m sure If I really had to I could figure out how to use JS to make columns the same height

People, stop blaming CSS for the things only IE cannot do.
CSS has nice display: table-* properties, and decent browsers do support them. Some even support CSS columns. Some - multiple background images.
If you love tables so much, why dont’ you marry them? :)

I have used JavaScript to lengthen my columns, and it works beautifully. Better than hacking up my CSS to hell and back. Choose your sacrifice.

I’m not going to add hacks to my CSS because (maybe) 1% of my market doesn’t have JavaScript enabled. Do some market research before adding CSS hacks. You may find that your audience uses newer browsers.

The comment I’ve appreciated most in this whole discussion is the person who questioned the utility of three-column layouts at all. Many people have nobly sought to demonstrate time and time again that CSS can do everything tables do, but you know what? That’s a secondary issue. The primary issue is that standards-based layouts can do tons of things that tables can’t.

Having a meaningful, simple XHTML page underneath things has saved me (and my clients) hours and hours and HOURS of time over the years, adding up to thousands of dollars. By being able to use CSS to make XHTML do tricks, I deliver them _money in the bank_. By providing them exactly the kind of liquid n-column layout a designer thinks is snazziest, I deliver them something of much more limited, even highly questionable benefit.

I’ll challenge a design that requires a particularly difficult layout before I’ll ever switch to a table for layout. Why? Because I shouldn’t expect the client to understand how vastly important it is to separate content from presentation—the client is paying me to know that, and to keep them from making such a costly mistake.

My problem with all the clever CSS tricks is that they depend on browsers to have sophisticated CSS support.

What about browsers found in Smart Phones and PDA’s (a huge potential market in the coming years) ? Apple will be rolling out the iPhone with some variation of Safari. The TREO uses a browser called Blazer. The RAZR phones use some un-named browser.

I’ve found these to very un-sophisticated in their CSS support. Tricks likes this will never work. If you want “real” cross browser support for simple page layouts - Stick with tables.

Until border images are a real thing, you can’t use a real, full-column height image for the rails, but you can potentially get something like it. If the rail content has a background image that is short enough to never exceed the smallest potential height of that column, it can be positioned at the top of the column (alternatively, min-height can work here in some situations). So, for instance, you can have an image that fades into the background color positioned at the top of the column to at least apply a little visual separation where it matters the most.

Regarding the cssplay technique mentioned in post #54 and elsewhere, I had not seen that prior to writing the article. I kinda wish I had. It would have saved me some work. The techniques presented there are very similar to mine, but not exact. If you look at the source, you will see the content is actually last, not first. He also uses an empty clearing div which mine does not.

Congrats! You’ve managed to create a CSS layout with code that’s more complicated than using a simple table structure. And your CSS looks like more code as well. Tables aren’t evil, used properly they can be helpful. We’re perhaps getting a little hung up on ‘no tables at all costs’. Tables are valid code, and they work fine with screen readers for the vision-impaired.

Tables, used properly, are perfectly accessible. Let’s stop saying tables-based layout versus standards-based layout, as if using a table makes your website stop working with a screen reader. I’m also not talking about some idiotic nested GoLive tables mess. Why do CSS folks assume a table-based layout has to be nested six deep? The most complex design shouldn’t need more than one nested table, and a good combo of CSS and tables can usually keep it to one simple table. Why not take the best of both worlds? At least until CSS-P is less flaky.

The problem with tables is simple: one day your client comes and says that he no longer want three-column layout, he wants a two-column layout with the third column stacked into the second one or into the footer. And then you grin like a madman and start converting your 300+ pages with tables in them.

Of course, this is less of an issue if you generate your pages dynamically server-side *and* have access to the templates or code. Actually, I think we woudn’t even have templates in web applications if only CSS was introduced and adopted a little bit earlier.

And then you grin like a madman and start converting your 300+ pages with tables in them.

——-

I’ve done redesigns on both ends. It’s the same amount of planning work, the same amount of design work in Photoshop (I hope you’re not ‘designing’ a site in a code editor, ‘cuz that ain’t design. Design starts with a pencil and a piece of paper.

Once your design concept is done, you have to figure out how to implement it with tables or CSS, or a combination. So you spend time figuring out the layout in CSS, dropping in new content, styling new content elements, getting rid of old ones, etc. Or you code your new table layout and swap in the new code across your pages with a simple find/replace.

In theory, in made up examples like the one above, CSS is faster. Experience in the real world has shown me there’s not much difference. What really saves time is proper planning, so your client doesn’t come back to you asking for major changes all the time. Measure twice. Cut once.

The CSS for “3ColLiquidWithContent.html”:http://www.alistapart.com/d/multicolumnlayouts/3ColLiquidWithContent.html breaks in IE 7:
“screen capture”:http://rentechie.com/other/break.gif
The HR between the articles is behind the first article, and the borders just get all sorts of interesting.

I like this implementation for three column layouts. The only issue I have found is that in IE7 when you zoom in on the page it continues to shift right. IE6, FF stay centered. What is going on with IE7?

I don’t know why people feel the need to pipe in with “my solution using tables is easier/better/more compatible.” The author was very clear he was trying to avoid tables. That was the author’s intent. To point out that tables can do the job is counterproductive and childish.
You wanna use tables? Great—don’t bash the work of people who are trying to do other things. From a standpoint of working with other people’s code, I’d rather see well-formed css because while a single nested table might be okay to work with, anything beyond about 3 gets nasty.
The thing is, I see a guy walking down the street eating an orange, I don’t go over and clobber him on the head with an apple to convince him of my fruit choice; generally I mind my own business about matters that don’t concern me. The people piping in with “tables do this better” are doing something analogous IMHO.
Just a point about civility in discussion, ya know?

Please stop bashing. As other dudes have said - the idea was not to use tables but also - using tables is WRONG. Semantically, using tables for this is WRONG. Tables are for TABULAR DATA, thats why they’re called TABLES.

Suraj, I get it. But the tables comments are valid here. I like CSS, but if you stand back and consider it objectively, it is *ridiculous* that it is this hard to deliver a multi-column layout with CSS. We need better design solutions. Also the accessibility guidelines as I remember them say it’s fine to use a table for layout as long as the table makes sense when linearized, which is easy. I still have to use tables on some projects, and we’ve tested in screen readers. The sites work fine, pretty much the same as a pure CSS site actually. Gasp!

Those talking about tables for this layout: you might be saving time (and the clients money) in the short term, but what about the next update or redesign?
The flexibility that css positioned layout is far more valuable than a quick table fix.
Heck, javascript before tables even. Tables should only be chosen instead of sudden death.

The reason I did this is without tables is the requirements said it had to be done without tables. It’s that simple. Tables were not an option. Even if they were, and it was discussed, another requirement said the main content had to come before the rail content in the source because it was more important the the rail content. This is for screen readers and users without CSS. Try to do a left rail layout but the content is first using a table. This has the content first and I can put the rail anywhere I want. You can’t do that with a table.

To those that say the CSS is to complicated when you could just use a table, do you still use the center tag? It is not nearly as flexible bit it is much easier that centering with CSS.

To post #71, as was pointed out in the article, a background image would not work due to the elastic requirement.

pointing out the ONLY shortcoming in tables (not being able to re-arrange the column order) does not eliminate the many problems with your technique. I can think of at least afew obvious ones:

1. No tiling background images for your side columns
2. No easy linup of different-colored bottom borders for your columns
3. No way of emulating the “rowspan” and “colspan” features in tables, especially if their use is accompanied by the addition of borders and background images

My point? Both methods (tables and no-tables) have drwabacks, but when everything is weighted, tables offer a more robust solution to what should be a simple problem.

Do a little “thinking out of the No-tables box” yourself: don’t you see something VERY wrong when you have to use BORDERS as CONTAINERS?

1. This shortcoming was pointed out in the article.
2. I am not sure what you mean with this one.
3. If you are using rowspan and colspan in layout tables then you are completely abusing using tables for layout.

The borders are not used as containers, just a way to provide a background color of full height. The containers are div tags.

Not being able to rearrange columns is the ONLY shortcoming I mentioned because it is the ONLY one that mattered. There are many others but I would be wasting bandwidth trying to re-explain what has already been explained in this discussion and elsewhere. If anyone is dead set on using tables for layout, be my guest. No one is forcing anyone to use this. This just provides an alternative for those of us who choose not to.

Your last sentence perfectly describes the problem with your approach:

“If anyone is dead set on using tables for layout, be my guest. No one is forcing anyone to use this. This just provides an alternative for those of us who choose not to.”

YOU are the one bent on using just ONE method, for no apparent gain. I, on the other hand I advocate a better strategy: use whatever fits the job at hand, and it has been VERY clear for several years now that 3-column layouts are not practical without tables; the amount of acrobatics needed to emulate default table behavior & appearance is just ridiculous.

I think it is pretty dim to avoid tables for the sake of avoiding them; once again, it’s time for you to follow your own advice: think outside the “no tables” box for a second. You might see the sun.

If my advice is not convincing enough, you might want to ask Zeldman himself the reasons for using a table here:

http://charlottegraymovie.warnerbros.com/cmp/main.html

Perhaps he knows something you don’t? Hint: tables are ok when needed, and NO, the site is NOT that old; it was built way AFTER the “no-tables” crusade…

Digest that one, my friend…

^^^^^^^^^^^^

As for “abusing tables for layout”: you sure wrote that with a ski mask on, didn’t you? I’m assuming that’s the case because accusing people of “abusing tables for layout” after all the CSS acrobatics and plain semantic butchery in your article certainly requires the use of a mask, my dear kettle.

By the way, if using rowspan and colspan is “abusing tables for layout”, then what, in your opinion, would constitute “NOT abusing tables for layout”? Is it possible that you are, perhaps inadvertently, leavig the door slightly open to the possibility that tables may, after all, be used for layout?

Lastly, while we are on the topic of table use and abuse: what are the rules for using rowspans and colspans? Are those “thingies” forbidden fruit? Illuminate us, the unwashed masses, please. I stand in front, humble and table in hand, waiting to see the light…

There sure are a lot of anal people commenting on this article. Get off your high horses and take a step back. If you want to use tables for layouts, go for it, if you prefer css, more power to ya. I don’t think its right for people in here saying its “against the rules” to use one versus the other. Whatever gets the job done, thats what matters.

I personally prefer using tables simply because I have more experience with it and I feel like I have more control about where things go. As for divs+css, I find myself falling into to css-hell when trying to debug layout issues.

Wow! Lots of CSS versus tables comments here. I said this in a previous comment, but I like CSS. The problem with the CSS movement is ‘generally’ the wrong arguments are being put forth for why it’s good. Tables can be used for layout, if used correctly, it’s not invalid code to do so and it’s also not against web standards to do so. What’s good about CSS is that it can offer more design freedom. But the CSS-P community should communicate better arguments.

One I hear all the time is how much time CSS saves when you’re working on a new site design. That’s a crock. You still need to plan. You still need to sketch. You still need to fire up Photoshop and Illustrator, etc. You still need to take photographs and source images. You still need to write content. Then, when all that work is done, you get into production, which I can tell you from real world experience is roughly the same for either method.

Bandwidth savings is also malarkey. The ‘size’ of any web page is overwhelmingly the graphics used in its production, not the code.

I could go on. But in my opinion the way to get designers to adopt CSS-P is to talk about the positive aspects of what CSS offers, and not to ‘table bash’, especially when the bashing is incorrect (as much of it tends to be).

Although retrospectively I am a zealot of no-tables layouts, using ONE table to achieve the equal height columns doesn’t seem such a heavy sin. What I really hate (and I yet didn’t make a decision about what method to use) is that tables don’t have a 100% height with a XHTML 1.1 DTD. I want that DTD! Ok…,fine… let’s asume is valid Transitional, that’s good to, not a deadly sin either. But… try to absolutely positionate with respect to the table. It doesn’t work in Firefox…(it will positionate with respect to the body not the <td>) That is what bothers me most.
Some unpleasant thing about tables is the multitude of nested tags (inside one single table I mean). With that kept in mind… 2 nested container divs and 3 more divs for content inside the first 2 is like using A table, seriously. What I really aim is to have separate div elements for header, footer, left column, right column, center column and equal heights too. Not a single nest between these ones (no problem inside them otherwise).

I’ve been reading posts and tips here since 2002, and never wrote html, only xhtml 1.0. I use the tonico 3col em layout here:

“Flowerchild”:http://homepage.mac.com/caroledanforth

His sample looked great (probably because he used trebuchet and dotted borders - I liked it) so I went for it. I’m happy with it, I hope. I haven’t seen my website in many browsers. It’s looks okay in Mac Safari and Firefox. It has more div layers than this example. Now that I have a fixed width amazon astore on one part of my site, the em expand is not good for that area. I’m just living with it because I’m afraid to change part of my site to px width.

I frankly got lost a long time ago on the point of overflow:hidden (because IE messes up on italic text or long links?) I have to agree that many of us are in over our heads with all this. You do have to be a magician with six browsers to be aware of all the issues. The Apple Developers Safari area actually advises using a table with 3cols, header, and footer for page layout. They simply remark that it works. Maybe they’re right. Anyway, I could care less about 100% screen height. I just don’t want the third column to fall below. And all the negative margin layouts tend to seem like abuse brought on by IE. A “negative margin” is nonsense, but it’s the only thing that works. Meanwhile, I’m tired of hearing “tables vs. css”. That’s misleading and confusing to many readers. Back in 2002 I at first thought that tables were some kind of illegal css. Tables CAN be styled in css.

Anyway, it occurs to me that a lot of this effort is also us standing on our heads to please search engines. When I began, I had a simple blog, which I now have little time to write in because of Technorati, local sitemap, Google Sitemaps and rss, all of which I have to update by hand. All of which have issues. I ranked higher in 2002 with a table layout, no sitemap, etc. Tell me why. Or no, I’m just here on a coffee break I’m giving myself.

I’ve tried all the equal height column methods (that I know of, maybe 4 or 5?). This is a pretty strong method if you want to background color in your column, but if you just want a 1px line (which i do a lot) with flexible content, it won’t really work.
i used to live by padding-bottom:3000px; margin-bottom:-3000px; until IE forced the columns to collapse. I’ve used the faux method VERY briefly, but i feel like it’s almost a waste of css to use an image like that.

I settled on using javascript to force all columns to be the same height. based on analytics I’ve collected, about 99% of users have javascript enabled, so that’s not really an issue.
the drawback of using this method is for people who resize the text (ctrl+) -> the columns won’t resize and the text will run off the page.
but if you give a click-option to resize text within the page you can avoid this, provided it gets used.

but I also only use equal height columns when force, else I avoid them at all cost.

I don’t like relying heavily on javascript, but equal height columns are tricky to get a global solution.

The final example with content seems to run into issue when I resize the width in IE 6. The bullets in the Article 2 box jump into the content box for that article.
http://www.alistapart.com/d/multicolumnlayouts/3ColLiquidWithContent.html

Wow!! I read through all the comments, and I think only one person mentioned SEO…
I’ve read many articles on SEO, and they all say the same- tables is a bad choise if you want a good rank.
I think that if you use tables for layout, you would have to spend alot of time afterwards showing the search engine spiders their way around your content…
I also agree with some of the other comments saying that this is really the browser makers responsibility. It’s about time they tell their browsers to play nice and to use the same rulebook…

Wow, what a bunch of useless non-sense about tableless CSS vs. tables design.

Anyways, I’ve adapted this technique for a website because of the problems with OTL and anchor links. Everything works well enough and I haven’t seen any problems in the browsers I’ve tested. But I still like to know more information about which browser will break.

I have been using this method for awhile and want to implement it on some of my pages for my current site. Thing is that the background image will not repeat in the firefox browser but looks great in IE6. Is there some trick I am unaware of to get background images to repeat-y in that browser?

I wish people would try shrinking their browser window (especially in IE 6) before posting their amazing discoveries here. Many of the solutions here show dropping text or, worse yet, overlapping text when the window gets smaller.

I’ve been away from client-side Web dev for a while, and reading through all these comments has certainly been interesting. In a situation like this, where you’re trying to create a layout that looks like it was created with tables, maybe it would make more sense to use a table. The only real drawback would be that you can’t position the main content division right up under the <body> tag. But if you don’t care about that, maybe it would make sense to use a table.

Of course, creating a boxy layout that looks like it was created with tables is really the crux of all this. For example, if you look at any of the 986 sample layouts at http://mezzoblue.com/zengarden/alldesigns/ I don’t think a single one uses “colored in equal-length” boxes. In fact, I can’t even remember the last time I saw a site that uses this kind of layout. (Though I’m sure there are plenty of them out there).

On the shrinking browser window thing, that’s a dreadful excuse for using tables. There are plenty of ways around the collapsing columns issue without resorting to using tables for layout.

Some other stuff got me to thinking that maybe it’s time for Web developers to stop making hacks for old/bad browsers. Adopt an attitude of “Hey, my page validates and looks fine in Firefox 2 and IE7. If it doesn’t look right in your browser, I don’t need to fix my page. You need to fix your browser”.

Then again, perhaps I’m just being idealistic.

And by the way, this is a cool way to do comments. Is this something ALA created? Or is this something I can buy and just drop into a site?

Hmm ... I’m trying to adapt this to a percentile size for the rail instead of “150 pixels or else” (on some resolutions and/or text-sizes, 150 pixels might be way too small). Unfortunately ... it seems that borders really don’t like percentages for their sizes. Oh well.

I don’t design web sites very often, but I have a couple to do now. As a law-abiding netizen my instinct is of course to follow every possible rule.
But I was taught at Harvard never to have anything to do with negative margins.
I am therefore working on a layout that uses negative tables. These allow special relative positioning or absolute superpositioning, with measurements in quems or quixels. They are completely undetectable by the CSS police.

I felt I had to chime in here re. tables vs. css. In principle I agree with the ‘use whatever is easiest for the job’ idea; but does no-one else care about source-ordering? We find most clients care a great deal about SEO and you just cannot get a nice source-ordered document with tables. This is the #1 reason we have switched to CSS/div based layouts.
So yes tables may be quicker, but for a real company’s site often they just aren’t good enough.

I have used this technique recently for a website and almost everything works well. I have also put a simple explanation as to how to achieve it at “Three column layout - Pearce Method “:http://www.latenightengineer.com/play/three-column-layout-pearce
I hope it may help someone.

Hi. I think this is a great solution to deal with three column layout. I don’t have any negative thoughts about this, but I have a problem to solve.

I didn’t see any problems when I created the template for the particular project. Once I started putting content in each column, the left column sometimes jumps into the middle column. It’s recognized in IE6. It doesn’t happen always. Here is the screen shot: http://newsite.netatlantic.com/jumping-column.jpg
The margin width of each side of the shell <div> matches to each column width.

I looked through the posts and don’t see anybody has the same issue as mine. Do you think of anything to trigger this issue? I want to know what I did wrong.

I know, I know, table layouts are evil. But sometimes there is just no better choice. Table elements are for structuring tabular data, I’have heared it hundreds of times. But you know, I prefer using a table to make columns instead of all those obscure css hacks.

First, these are not standard ways of doing things, they are hacks; you’ve said it yourself, you have to “think outside the box” to find them. You had to think about unfamiliar, unfriendly and unintuitive code hacks to achieve a simple effect whitch can be easily done with a table and a few “normal” css.

Second, by using a “hack” to layout your stuff, you lose the hability to easily change your presentation style. Try to put a background image to your columns : you will have to completely rewrite your css code. You won’t get all these headakes with a table.

Third, using a floating div to make a column is not better than using a table to layout non tabular data. I mean, the float property is meant to be used in making an image float over some text. Ok, you can twist the original meaning of this property and handfully use it to achieve your goal, but, in my humble opinion, it is not better practice than using a table to layout non tabular data, even more, it IS also a semantic error.

The real nice solution would be to use the “display : table-cell” css attribute in my opinion. However it is not supported by IE. So what do we do then ? My personal choice is to use tables instead of figuring out a new pointless unintuitive hack. ( I’m gonna be crucified for saying this… )

Wow, what will they think of next?
I agree with you Nicholas, so far I have not seen anything to top the performance of an absolute width declaration (via table) and then pinching around with that. I use “includes” to be able to recycle the code pieces (the greatly touted advantage of css). but the point is you can vary backgrounds and images and make a “tasteful” or a “noisy” site. I think the style of the “3ColLiquidWithContent.html” is particularly _ugly_. But I am mrPictures not mr Text, and probably a “Design Dinosaur” to boot.

Sorry I can’t post a link to the site, as it’s still only served internally ... I’ve got a two column layout, using the “+large” padding-bottom & “-large” margin-bottom, and the containing div has overflow:hidden.

The problem is when you hit an intra-page link to a named anchor, the content above that anchor gets hidden! If you refresh the page in IE7 the whole content comes back, but this does not happen in FF. Using links back to “top” is a solution, but I’m getting some pushback from content developers who think there are too many top links (d’oh!).

Is there a CSS fix for this out there? This is for a state government site, so we’re trying to avoid javascript solutions for such things (which is why the multi-column “one true layout” CSS is so much appreciated).

I’ve been using this in many recent designs, as it appeared the perfect solution—spent the entire morning trying to debug a new site, which was fine yesterday—just traced it to Firefox update to 2.0.0.8—breaks all instances of this solution. Anyone any ideas on how to work round this, until Mozilla can sort themselves out?

It looks like there have been at least 3 bugs raised in the Mozilla bug tracker for this issue and it is being actively worked on. The main one is here: https://bugzilla.mozilla.org/show_bug.cgi?id=400406

One solution would be to inject dynamic content after the container using the :after pseudo-element

I’m doing a redesign for my site right now and I don’t see how this is a big deal.

I had read this column before but did not have its exact coding in mind when I started filling out the style sheet for the page. I ended up in more or less the same place.

http://www.besalighting.com uses tables. Do you know what that design has? table-tr-td-td-td-table-tr-td-etc. There are over 250 lines of code, including java, the page itself is 15k, and employs about 80 (EIGHTY!) images totaling an additional 100ish kb for buttons, mouseover effects, etc. This code is copied on every page in order to provide a consistent look, and in fact it exposed a problem when the wrong lefthand menu appears on some of the pages.

The work in progress is www.besalighting.com/newindex.shtml. It employs less than 40 lines of code. The style sheet is a whopping 2k. It currently uses 4 images. The left hand column is a fixed width, and the main body scales. The footer is actually not below the main div, but at the bottom of the left hand column (using negative margin-top). As far as I can tell, it works correctly in IE 6/7 and Firefox at any width 800 or greater, the footer always drops to the bottom, the dividing line always covers the intended area, I can change the text without affecting the layout, I can update the header , navigation bar and left-hand menu by manipulating the SSI pages and have them show up identical on every single page. And everything so far comes back 100% validated.

I have a website that I developed in IE. It looks fine in Safari and Firefox. However the fonts, letters are looking a bit smeared. Are there established stylesheets out there that can assist me. I mainly am looking for font styles, etc. not layout.

Unfortunately, this solution suffers what much of the web suffers from of late: fixed width websites. Alas. A List Apart suffers from this as well. “For People Who Make Websites”. Yes, but really for “People Who Make Fixed Width Websites”. It’s a regression in functionality. Oh well.

I have approached the equal height columns from a different angle. By nesting the column divs they automatically take on the height of the tallest column. I have created some examples that have no CSS hacks and they work in all the common web browsers:

Sorry to take part into discussion so late, but I found this layout and discussion recently. Thank you Matthew for very nice and useful solution. Why not to play with negative margin, it’s OK.

I found a little IE6 bug when adding pictures or texts on the articlerail.

The pictures escape often to the right over the rail border, when you rezise IE window. The highest picture does no escape, no matter the picture widht.
Here is example before resizing: http://juhanile.fidisk.fi/3layout_wPictures_1.jpg
... and here after resizing: http://juhanile.fidisk.fi/3layout_wPictures_2.jpg
When I switch the pictures, always the first picture stays in the rail but the two last ones escape to the right.

Of course, all other browsers behave nicely.
Here is css for the pictures on the article rail:
#raide img {
margin-left:2px;
margin-top:2px;
display: inline;
overflow: hidden;
}
Also I have added to the #center this line:
overflow: hidden;

I worked with it for a while but gave up. Thank you, thank you, Matthew Taylor for posting the links to your samples. You have just the solution I have been looking for. Just plain common sense and CSS without any buggy hacks.

The preview looked fine I swear! Here’s another try with code tagging:

Here’s an alternative way to use negative margins to get a three-column layout. I’ve used the example HTML from this article, but note the CSS methods used for layout are quite different, using padding on an “inner wrapper” div within the center rather than borders.

Three questions:

Do you see a problem with using this method as the basis for a fully fleshed out three-column layout?

Have you seen it used as such before, and if so, can you point to further examples or information on the technique? (side note, if not, I christen it the “Kapok” method since it uses padding <g>

and

Can you point to “tried and true” three-column layout techniques robust enough for a CMS-driven site where users are contributing unpredictable content that may disrupt a fragile layout?

I’ve set the code up in three stages like a howto, so that newbies can easily see the logic behind it.

first, thanks to help me climb out oft the box————————————————————————
i try to use it in asp.net
in file MasterPage.master
it can’t work
it can’t display like you in design page but
it cant preview in ie 7.0+ only

great article indeed!
I tested it with some odl browsers and yeah - it is not taht good but who cares? Just look at the recent stats of what users use and you’ll find that IE 6 is the oldest while IE 7 and FF are two equal leaders.

Working on a website for our local volunteer fire department, and just can’t seem to get the columns right. Site looks okay in IE7 with the use of a few
‘s, etc., but not okay in Firefox and Opera. And Safari is way off. All I know about using this type layout came from your website.

I have found this solution useful in getting my site done the way I want. Now, the only thing left is to figure out how to center the entire layout in the middle of the screen, versus having it align to the left edge of the screen. Any thoughts?