A List Apart: Comments on: Multi-Column Layouts Climb Out of the Box

Posted by: Neutrino X

2012-05-22T12:00:48+00:00

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.

Posted by: Steve Dennis

2012-05-22T12:00:48+00:00

Nice in theory, but I'm almost never going to be able to use this in practice, as virtually all my column layouts use background images in one form or another.

Posted by: Ole Hook

2012-05-22T12:00:48+00:00

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...

Posted by: Fredrik Frodlund

2012-05-22T12:00:48+00:00

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!

Posted by: olivier roux

2012-05-22T12:00:48+00:00

Hello, great hack, but I tried to "double it", i.e. having on the same page TWO blocks each containing the same two-columns layout one above the other: | A |B| | C |D| so that blocks A and B would be of the same height, and C and D too... but I can't manage to have it to work... All I get is that the second "row" is badly aligned to the left... Any help? Thanks.

Posted by: olivier roux

2012-05-22T12:00:48+00:00

sorry about the previous spot, it's too early in the morning and I had just misplled ;-) one of the selectors... silly me.

Posted by: Neutrino X

2012-05-22T12:00:48+00:00

Container block of C & D should have {clear:left} :)

Posted by: Jake Archibald

2012-05-22T12:00:48+00:00

I find that using zoom:1; is better than using height:1%; It has the same effect but doesn't have to be put inside a * html block or conditional comments. It has the same effect as height:1% in IE with the added bonus that you can use it on elements with overflow: hidden or auto, as it won't make the element 1% in height.

Posted by: Fred Reisac

2012-05-22T12:00:48+00:00

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.

Posted by: Gauke Pieter Sietzema

2012-05-22T12:00:48+00:00

I didn't know negative margins were unintended. I use them pretty often (when ie6 messes up most of the time). Does the w3c documentation state its unintended to use negative margins? About the actual multi-column technique: I really like it and might use it on a project scheduled for next month!

Posted by: Joe Bloom

2012-05-22T12:00:48+00:00

I'd just like to say thanks, I was having some issues with getting this to work correctly in IE - but it was just an error of my own. This really opened my eyes, this is a lot cleaner than my usual way of two (or three)-column layouts. Thanks again.

Posted by: Andreas Borutta

2012-05-22T12:00:48+00:00

Still the left rail of http://www.alistapart.com/d/multicolumnlayouts/2ColLiquidLeftRailTallestHeaderFooter.html isn't liquid: it isn't elastic in its width. [img]http://borumat.de/bilder/screenshot-temporaer/hc-134.png[/img] 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. td.rail { width: 150px; } table{ width: 100%; }

Longwordlongword

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercita tion ullamco laboris nisi ut aliquip ex ea commodo consequat.

When a low vision user zooms as high that a long word doesn't fit into a column with a given width, the column will expand. I'm still not a friend of legs which hang outside into anothers bed. And all multi-column layouts, improvised with DIV and CSS, I know, show this shortcoming.

Posted by: Mike Purvis

2012-05-22T12:00:48+00:00

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.)

Posted by: Dan Nawara

2012-05-22T12:00:48+00:00

I suppose I'm missing something, but how does this differ from placing a background image on the container div? I'm not understanding the benefit?

Posted by: Kevin Rapley

2012-05-22T12:00:48+00:00

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

and then in the style sheet give these some margins or padding: #center .content, #leftRail .content, #rightRail .content { padding: 10px 0 0 10px; }

Posted by: christos constandinou

2012-05-22T12:00:48+00:00

I like my way better, it's easier to get pixel perfect widths and it is also more abstract, so it's easier to change the order of columns without affecting readability of the source code. http://layout.constantology.com and yes it's based of YUI Grids, though users find it easier to read/ understand and over-write.

Posted by: Andre Kemner

2012-05-22T12:00:48+00:00

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.

Posted by: Mike Hairston

2012-05-22T12:00:48+00:00

I wonder how many hours have been charged to clients by designers chasing after obscure non-table solutions to problems like this...when a simple, non-nested table _gets the job done_.

Posted by: christos constandinou

2012-05-22T12:00:48+00:00

Mike Hairston and Andre Kemmer, you're both obviously morons. Ever heard of the http://www.w3.org/WAI/? Now shut up and stand aside for people that can do their job.

Posted by: Brian LePore

2012-05-22T12:00:48+00:00

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.

Posted by: Mike Hairston

2012-05-22T12:00:48+00:00

Uh-oh. It's the fuzz.

Posted by: Blake Ramick

2012-05-22T12:00:48+00:00

How about one with a header and footer ;). [url="http://www.cssplay.co.uk/layouts/3cols.html"]Cssplay example[/url]

Posted by: Bruce Lawson

2012-05-22T12:00:48+00:00

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.

Posted by: Jeffrey Zeldman

2012-05-22T12:00:48+00:00

Thanks, Bruce. Settle down, people.

Posted by: Martin Heiden

2012-05-22T12:00:48+00:00

I use this technique for a long time, thanks to: http://webhost.bridgew.edu/etribou/layouts/skidoo_redux/index.html

Posted by: Andre Kemner

2012-05-22T12:00:48+00:00

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.

Posted by: Charlie Clark

2012-05-22T12:00:48+00:00

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.

Posted by: Martijn ten Napel

2012-05-22T12:00:48+00:00

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.

Posted by: Htmler Tabler

2012-05-22T12:00:48+00:00

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.

Posted by: Dave M

2012-05-22T12:00:48+00:00

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.

Posted by: Michael Wong

2012-05-22T12:00:48+00:00

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.

Posted by: olivier roux

2012-05-22T12:00:48+00:00

Might be true, but we are not talking about HEAVILY nested tables here, just a simple one-row table with two cells for the main layout and basta...

Posted by: Reid Young

2012-05-22T12:00:48+00:00

There's no need for namecalling. How about some _lovin_ instead? 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.

Posted by: Charlie Clark

2012-05-22T12:00:48+00:00

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.

Posted by: Mike Hairston

2012-05-22T12:00:48+00:00

"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. After all, who isn't working under a budget or a tight deadline?

Posted by: anton neureiter

2012-05-22T12:00:48+00:00

First of all nice work done with the CSS. It does take some time to get something like that to work. 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.

Posted by: Oliver Bertschinger

2012-05-22T12:00:48+00:00

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.

Posted by: Fred Reisac

2012-05-22T12:00:48+00:00

??*Negative values for margin properties are allowed, but there may be implementation-specific limits.*?? (CSS2-Ref-8.3) So, negative margins is valid syntax, but unspecified behaviour. It will require a W3C official to convince me of something else. Sorry. Thanks for the links to http://layout.constantology.com (IE7 needs a rounding error fix) and YUI grids.

Posted by: fergsu davidson

2012-05-22T12:00:48+00:00

... full height columns? three columns equal height is great, but for me 'the holy grail' has been the equal 100% height, flexible centre, 3 column layout, containing image backgrounds. we had one, and then ie7 came along and messed it all up.

Posted by: M C

2012-05-22T12:00:48+00:00

stuff like this makes me even more impatient while waiting for multiple, resize-able background images.

Posted by: M C

2012-05-22T12:00:48+00:00

stuff like this makes me even more impatient while waiting for multiple, resize-able background images.

Posted by: M C

2012-05-22T12:00:48+00:00

and border images

Posted by: Jose Ignacio Santa Cruz

2012-05-22T12:00:48+00:00

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. Anyway it still is a browser HTML rendering issue.

Posted by: M C

2012-05-22T12:00:48+00:00

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

Posted by: Andrew Bacon

2012-05-22T12:00:48+00:00

Regarding the elastic layout... When you reduce browser width, the columns overlap each other, rendering the content illegible. How is this a valid solution?

Posted by: Rimantas Liubertas

2012-05-22T12:00:48+00:00

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? :)

Posted by: Steve Clay

2012-05-22T12:00:48+00:00

@Rimantas: Even with display:table we'd have to change content order for presentation's sake. And there's no CSS equivalent of spanned cells. @Andrew: Giving BODY a min-width should cure the column overlap.

Posted by: Brian Cray

2012-05-22T12:00:48+00:00

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.

Posted by: Ian Smith

2012-05-22T12:00:48+00:00

Genius, but I prefer the javascript as well. I like that I can style my columns to any degree. With javascript disabled, you'd just get a shorter column, which is a nice clean degradation.

Posted by: Nathanael Eagle

2012-05-22T12:00:48+00:00

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.

Posted by: mario pantoja

2012-05-22T12:00:48+00:00

Ive been using the Borders trick in my site.. I'm not a professional web designer (not evne designer), but I saw the idea in a CSS tutorial site and it just works!, happy browsers! this article and comments are great for learning!! thanx!

Posted by: Jurij Burkanov

2012-05-22T12:00:48+00:00

Interesting, but still not 10% as good as table would do.

Posted by: Dan Broughton

2012-05-22T12:00:48+00:00

Would appreciate if anyone could find any problems with what I have tried on my site: http://www.4w.co.uk/

Posted by: Vasili Sviridov

2012-05-22T12:00:48+00:00

...exactly the same technique... http://www.cssplay.co.uk/layouts/3cols2.html circa 2004

Posted by: Stan Slaughter

2012-05-22T12:00:48+00:00

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.

Posted by: Aleksandar Vacic

2012-05-22T12:00:48+00:00

I have just encountered a design, perfect for this. Implemented it today, works exactly as required by client.

Posted by: Mark Kawakami

2012-05-22T12:00:48+00:00

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.

Posted by: Andrew Banks

2012-05-22T12:00:48+00:00

Insert subversive article here: "Coming Back to the Table":http://banksand.googlepages.com/comingbacktothetable

Posted by: Alan Pearce

2012-05-22T12:00:48+00:00

Re post #4: Whitespace between columns can be done very easily. See: http://alttag.org/?p=11

Posted by: Alan Pearce

2012-05-22T12:00:48+00:00

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.

Posted by: Michael Last

2012-05-22T12:00:48+00:00

In this case I'd use table without thinking even 1 sec. HTML code would be more clear and "direct".

Posted by: Space Gorilla

2012-05-22T12:00:48+00:00

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.

Posted by: Space Gorilla

2012-05-22T12:00:48+00:00

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.

Posted by: Radomir Dopieralski

2012-05-22T12:00:48+00:00

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.

Posted by: Space Gorilla

2012-05-22T12:00:48+00:00

----- 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.

Posted by: Shayan Moini

2012-05-22T12:00:48+00:00

How would you modify the 2 column layout with headers and footers, in order to automatically vertically strectch to screen height?

Posted by: Kevin Pickens

2012-05-22T12:00:48+00:00

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.

Posted by: Viktor Vyalchin

2012-05-22T12:00:48+00:00

Thank you for the great job you've made! Russian translation of your article can be found here: http://web-log.ru/?p=96

Posted by: Andrzej Taramina

2012-05-22T12:00:48+00:00

The problem I have had with all solutions of this genre is that the columns start to overlap when you minimize the width of your browser too much. Even the examples do that, both in IE and FF. This looks very unprofessional, despite the fact that most users will not ever minimize that much. And 30 years of hard-core development have led me to believe that all corner cases should work. The solution would be to try and figure out a way to implement a min-width on the page, so that you can avoid squishing the liquid column into others at the extreme. Problem is that I haven't found a way to do that in IE. Anyone else had any luck with such an approach in IE? Thx! ....Andrzej

Posted by: Eric Tribou

2012-05-22T12:00:48+00:00

My own work using this method: "Skidoo Redux":http://webhost.bridgew.edu/etribou/layouts/skidoo_redux/ Compatible back to IE 5.0 on both Mac and PC. Lots of comments. Hacks are separated in the CSS so they're easy to find and manage.

Posted by: Carlos Vergara

2012-05-22T12:00:48+00:00

Nice POC, though I think its worth nothing as a production technique. I'd rather apply a vertical tiling background image and adjust the columns size via scripting (trivial though useful) than just not using anything aside BORDERS.

Posted by: Max Bronsema

2012-05-22T12:00:48+00:00

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? Thank you

Posted by: Ted Hopp

2012-05-22T12:00:48+00:00

Just to clear up a point raised early in the discussion ("Unintended Consequences", Feb. 6, and sorry if I missed where someone else aready did): "Unlike margin properties, values for padding values cannot be negative." (From http://www.w3.org/TR/CSS21/box.html#padding-properties) Negative margins are perfectly fine and not at all "unintended" by W3.

Posted by: James Hare

2012-05-22T12:00:48+00:00

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?

Posted by: Suraj Bharath

2012-05-22T12:00:48+00:00

Is this really any more useful than "Liquid Layouts with Negative Margins" - http://www.alistapart.com/articles/multicolumnlayouts/ ?? Also there seems to be no mention of this in the article but forgive me if I'm wrong :)

Posted by: Suraj Bharath

2012-05-22T12:00:48+00:00

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.

Posted by: Space Gorilla

2012-05-22T12:00:48+00:00

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!

Posted by: George Marez

2012-05-22T12:00:48+00:00

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.

Posted by: Alan Pearce

2012-05-22T12:00:48+00:00

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.

Posted by: troy waters

2012-05-22T12:00:48+00:00

Well, Alan 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? The "no-tables at any cost" mentality has reached its lowest point...

Posted by: Johan van der Meer

2012-05-22T12:00:48+00:00

*gasp* ... no tables? Man have i got a lot to learn... How would you, then create a table like this? ---------------- | | | | ---------------- | | | ---------------- | | | | | ---------------- ... just a crazy example... but css is the way to go?

Posted by: Alan Pearce

2012-05-22T12:00:48+00:00

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.

Posted by: troy waters

2012-05-22T12:00:48+00:00

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...

Posted by: Andrzej Taramina

2012-05-22T12:00:48+00:00

The problem I have had with all solutions of this genre is that the columns start to overlap when you minimize the width of your browser too much. Even the examples do that, both in IE and FF. This looks very unprofessional, despite the fact that most users will not ever minimize that much. And 30 years of hard-core development have led me to believe that all corner cases should work. The solution would be to try and figure out a way to implement a min-width on the page, so that you can avoid squishing the liquid column into others at the extreme. Problem is that I haven’t found a way to do that in IE. Anyone else figured out how to impose a min-width on the centre column in IE with some sort of hack? Thx!

Posted by: Sohel Katchi

2012-05-22T12:00:48+00:00

Tell me why you cant just use tables instead? seems like a lot of work just to get divs+css to mimick tables.

Posted by: Sohel Katchi

2012-05-22T12:00:48+00:00

Just read some of the comments, disregard my previous comment about using tables.

Posted by: Sohel Katchi

2012-05-22T12:00:48+00:00

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. Just my 2 cents.

Posted by: Space Gorilla

2012-05-22T12:00:48+00:00

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).

Posted by: Kees van Dieren

2012-05-22T12:00:48+00:00

My problem with the CSS solution is that it needs to be recoded for each time using it. I have created a combined CSS / javascript solution which aims to allow easy reuse. It is available from: [url="http://javascript-toolkit.googlecode.com/files/javascript-toolkit-0.2.zip"]here[/url] (open html/equalize-height-example.html in browser) X HTML source example: [url="http://javascript-toolkit.googlecode.com/svn/trunk/html/equalize-height-example.html"]click here[/url]

Posted by: Ionut-Gabriel Stan

2012-05-22T12:00:48+00:00

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 ) 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).

Posted by: Carole Danforth

2012-05-22T12:00:48+00:00

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. Over and out.

Posted by: Carole Danforth

2012-05-22T12:00:48+00:00

"Tonico 1-2-3 col layout":http://webproducer.at/flexible-layout/ By the way, I really like the instant Comment Preview here.

Posted by: Art Wagner

2012-05-22T12:00:48+00:00

In my tests, this method works well with recent versions of Opera, Mozilla, Firefox, and IE 5.5 and higher. It failed with Netscape (footer comes toward top of page and side columns have no background color) and IE 5.01 (left column covers center column). I also had to add a height to the footer div's css to prevent the footer from separating from the container div in IE 7.0. Who knows? Maybe there are easy fixes for IE 5.01 and Netscape, too. My sites still get a number of visitors using IE 5.0, so for now this isn't feasible for my use. But in a year or two it might be a useful tool.

Posted by: Coralie Pietsch

2012-05-22T12:00:48+00:00

I've been doing some practice with this design. The following addresses some issues in IE 5.01 & IE 5.5. Haven't been able to simulate min-width on it. Word-wrap helps on long URLs. (Hope it hasn't already been suggested .. got sick of wading through the tables v CSS stuff...)

Posted by: Coralie Pietsch

2012-05-22T12:00:48+00:00

ah... the width expression makes a min-width in IE...

Posted by: Tim Wright

2012-05-22T12:00:48+00:00

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. I SHALL RETURN WHEN I FIND ONE!!

Posted by: evan plaice

2012-05-22T12:00:48+00:00

I didn't see the point of playing the fake-margin game. Why not just use percentages to make the column containers snap into place. No tricky hacks, no bs. Simple arithmetic. 33% + 33% + 33% = 100% HTML ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

CSS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ /*3 Column Text Block*/ .col3s { position: relative; width: 100%; height: auto; float: left; display: block; margin-top: -15px; } /*Column Designator*/ .col3 { position: relative; width: 33%; float: left; font-size: 72%; text-align: left; } .col3 li { list-style-type: none; To see it in action goto: http://www.jpasims.net/projects/index.php

Posted by: Derek E

2012-05-22T12:00:48+00:00

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

Posted by: Soeren Petersen

2012-05-22T12:00:48+00:00

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...

Posted by: Carlos Myers

2012-05-22T12:00:48+00:00

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.