Deal-breaker problems with CSS3 multi-columns
Firefox and Webkit support some of the CSS3 multi-column layout properties—but not very well. Unfortunately, the spec isn’t very clear about what’s correct. Until the spec is clearer and the browser problems are ironed out, multi-columns are useless to me.
I’ve been playing around with the new multi-column properties of CSS3 (column-count, column-width, and so forth), and I’ve come to the conclusion that they’re sadly not ready to really use. Sure, use them in experimental sites, and maybe even in mainstream sites in small doses with very particular types of content. But for most content, I found that there’s not enough control over how the content is distributed between columns to make them reliable. I’m not sure if the browser behavior I’ve been seeing is correct or not; the spec is unfortunately not well defined enough to make it clear—at least to me—of how browsers ought to be handling some of the problems I ran across.
Balancing column heights
The first problem is how the browser should handle one or more extra lines of content if the amount of content cannot fill up each column equally. In my opinion, the extra content should come at the bottom of the first columns, so that columns further to the right are never longer than columns further to the left. This is pretty standard practice in print design, and having it any other way just looks really strange. At least to me. Take a look and you decide:
The last column has one extra list item and line than the previous columns.
Doesn't this look weird?
Another example of the last column being longest.
You can check out the first demo page yourself. Resize the window and see how each browser handles column number, placement, and height.
It seems like the column-fill property is supposed to address this problem, but I may be misunderstanding what it’s supposed to do. In any case, my testing has shown that no browser supports it, even with browser-specific prefixes. So, we’re left with these unbalanced, awkward looking columns.
In some cases, I understand why the browser is making later columns taller than earlier ones. For instance, there’s a bottom margin on one of paragraphs that happens to fall at the end of one of the columns, leaving a gap and making that column shorter than the following column. I know there are cases when this behavior is desirable and necessary given the content. But we ought to be able to control it, and we can’t right now, and the default browser decisions about how to fill look weird to me in many cases.
Flowing margin and padding across columns
The second problem is how the browser should handle margin and padding on elements inside the columns. Webkit will let margin and padding be split in between columns; even when it doesn’t split a bottom margin, it will often let the entire margin show up at the top of a column. This can result in some extremely ugly and bizarre stuff:
Safari and Chrome break margin and padding between columns.
Check out the second demo page with extra margin and padding added.
Firefox, on the other hand, expands the height of the column area to accommodate the padding, and let’s margin escape out the bottom (margin collapsing at work, I guess) rather than letting it show up at the top of a column.
Firefox makes the bottom margins on the last items in the columns just disappear, instead of splitting those margins across columns or allowing them to show at the top of a column.
Again, the spec doesn’t seem to say anything about which implementation is correct (does it?), but in my opinion, the way Webkit handles it just has to be wrong. Margin and padding are never ever split, are they? And even if they are split in other non-column CSS layout scenarios, it certainly doesn’t make sense to do it in columns. Again, it breaks with print design conventions; while I know web design does not have to emulate print, there are certain typographic conventions that we’ve preserved on the web for readability’s sake, and breaking them would make most people say it looked “wrong.” I think this is one of those cases, and in my opinion, it’s the biggest deal-breaker for using columns right now. Or at least, using them in Webkit-based browsers.
Again, if there are fringe cases where it makes the most sense to split the margin and/or padding, by all means let’s do it. But we need a CSS property to control that, and it doesn’t look like there is one in the spec now. So for now, I hope Webkit changes how they handle this to match up with Firefox’s more intuitive choice, and that the W3C clarifies this in the spec.
Breaking content across columns
Finally, the third problem is that neither Firefox nor Webkit seem to support the column break properties. For instance, adding break-inside: avoid-column; to the li elements should keep the content in each list item from breaking across columns. Unfortunately, it doesn’t work right now.
The text "Start sociis natoque end" is all one list item, but both Webkit and Firefox break content within the list items.
The third demo page is the same as the first one, but it has the break-inside properties added. As you can see, it behaves the same as the first demo.
Controlling breaking isn’t necessarily a big deal with a simple series of paragraphs, but it becomes more important on lists with brief list items, as shown in the image above, and when you have headings mixed in the text, as you definitely want to make sure that headings stay with their following text. Not having support for the breaking properties can really impede usability and limits the usefulness of multi-columns.
Next steps? Workarounds?
Given these problems, multi-column layout isn’t very useful to me right now. Honestly, it’s always been something that I’ve thought should be used only sparingly, in very particular cases. But with these problems, I’m not going to use it in any cases. I’m really hoping that the spec continues to evolve and that browsers continue to update their implementation of these features. (I’m mainly looking at you, Webkit.)
In the meantime, if anyone has any workarounds for these problems, I’d love to hear them!
41 Comments
You can follow the comments for this post through the comments RSS feed.
1
zomigi.com » Deal-breaker problems with CSS3 multi-columns | Modern Design wrote on April 02, 2010, at 3:15 pm:
[...] from: zomigi.com » Deal-breaker problems with CSS3 multi-columns Share and [...]
2
uberVU - social comments wrote on April 04, 2010, at 11:55 pm:
Social comments and analytics for this post…
This post was mentioned on Twitter by smashingmag: Deal-Breaker Problems With CSS3 Multi-Columns – http://bit.ly/9mn6Ho...
3
Tweets that mention zomigi.com » Deal-breaker problems with CSS3 multi-columns -- Topsy.com wrote on April 05, 2010, at 12:06 am:
[...] This post was mentioned on Twitter by Smashing Magazine, Wu Han, Paulo Elias, css3watcher, mohamed sadik and others. mohamed sadik said: RT @katharnavas: RT @smashingmag: Deal-Breaker Problems With CSS3 Multi-Columns – http://bit.ly/9mn6Ho [...]
4
Leon wrote on April 06, 2010, at 10:53 am:
It works if, like you say, you implement it with very simple, short blocks of content (see IA’s site for an example.
I don’t really see the point of using it on screen for anything more ambitious. Scrolling back up a page to continue reading is a PITA.
5
Zoe Gillenwater wrote on April 07, 2010, at 4:58 pm:
Hi Leon. Yes, I agree it is not good for long stretches of text. But as my test pages show, these problems can very easily rear their heads in short pieces of text. And, one of the best uses for multi-columns, IMO, is for short lists, but my second list example looks like a train wreck in Safari/Chrome.
6
Lars Gunther wrote on April 10, 2010, at 6:05 am:
I think Firefox behaves quite sensibly on most of your tests, and its behaviour could possibly be a starting point for standardization. The obvious missing piece is of course column-break (Bug 549114 https://bugzilla.mozilla.org/show_bug.cgi?id=549114). The Webkit bug is at https://bugs.webkit.org/show_bug.cgi?id=15552 but only for “before” and “after”.
In a few cases the first column has not maximum height, but at least 90 % of the time it does. In the few cases it does not it seems to be that its because of bottom margin. It seems sensible.
However, fixing bug 549114 is not trivial as it will affect the column height/distribution algorithm. What if one column becomes so high that the last column is not needed? E.g. I have an unbroken list that ends up in column 2. The column width makes for 4 columns in total, but all other content actually fit in the 3d. Should we have a 4th, empty, column?
7
Estelle Weyl wrote on April 10, 2010, at 1:15 pm:
While I don’t think columns should yet be relied upon as part of a design, they can be used for improved readability on liquid layout sites (or very wide fixed layout). I view columns as an enhancement.
I haven’t written the explanation of issues in my Grid of CSS3 Columns and Browser Support. This post did bring up several concerns that I should add to my explanations: while CSS3 columns may be supported in a browser, they may not always look as intended.
8
Greg wrote on April 11, 2010, at 2:36 pm:
Thanks for all youre hard work on this post. I’ve been working an experimental site for a few weeks and just recently started playing with columns. I haven’t run into any of these issues, but that’s largely because I’m only using two or three columns. My hunch is that users won’t notice a lot of the margin and padding issues that you bring up here with smaller numbers of columns – especially if they’re on the wider side.
9
Heather wrote on April 11, 2010, at 7:58 pm:
Unfortunately, while a widely anticipated feature of CSS3, I think the column property is past it’s prime. We’ve become so accustomed to scrolling down, paginating longer stories – that I’m not sure putting content in columns will benefit the content.
As a design element for short pieces as mentioned before, maybe, but as a way to read the web – nope.
10
Weekly Tweets 2010-04-16 | Siberia - Creator Of Digital Design - Websites & Interfaces wrote on April 16, 2010, at 5:18 pm:
[...] is so annoying in Chrome/Safari/Webkit – http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/ [...]
11
Peter Gasston wrote on May 08, 2010, at 3:56 am:
All very true. There’s one other issue that Firefox & WebKit handle differently, although I’m not sure if it meets your definition of a deal-breaker. Consider an element with the following styles applied:
div { column-count: 5; column-width: 100px; width: 800px; }The spec says only that in this case,
column-countbecomes a maximum value. Firefox handles this by creating five columns of about 150px each (usingcolumn-widthas a minimum value); WebKit creates five columns of exactly 100px each.12
Peter Gasston wrote on May 09, 2010, at 12:05 pm:
Tried posting this before, but seems to have disappeared…
There’s another difference between browsers on elements which have both
column-countandcolumn-widthapplied. The spec states that in that situation,column-countis a maximum value. So consider code like this:div { column-count: 5; column-width: 100px; width: 800px; }Firefox creates five columns of about 150px each, to fill the width of the div; WebKit creates five columns of exactly 100px each, leaving a large blank area to the right of the element.
Not sure which of the two is correct, so the spec needs to specify more clearly.
13
Zoe Gillenwater wrote on May 17, 2010, at 9:59 pm:
Lars, I think in some cases an empty column is indeed preferable. Firefox does this sometimes on the list test, and I quite like it for that use case. Again, it’s the sort of thing that we should be able to control, because it depends on both the content and the designer’s preferences.
Peter, yes, that’s another area that is not clear. I don’t have strong feelings on which seems more “right” to me. Probably another “it depends,” personal preference thing.
14
50 New Useful CSS Techniques, Tools and Tutorials - Smashing Magazine wrote on June 10, 2010, at 10:38 am:
[...] latest versions of Safari, Firefox and Opera support most, if not all of them.Useful CSS Techniques Deal-breaker problems with CSS3 multi-columnsI’ve been playing around with the new multi-column properties of CSS3 (column-count, [...]
15
50 New Useful CSS Techniques, Tools and Tutorials - Smashing Magazine wrote on June 10, 2010, at 10:38 am:
[...] latest versions of Safari, Firefox and Opera support most, if not all of them.Useful CSS Techniques Deal-breaker problems with CSS3 multi-columnsI’ve been playing around with the new multi-column properties of CSS3 (column-count, [...]
16
50 New Useful CSS Techniques, Tools and Tutorials | Web Design Cool wrote on June 10, 2010, at 10:54 am:
[...] Deal-breaker problems with CSS3 multi-columnsI’ve been playing around with the new multi-column properties of CSS3 (column-count, column-width, and so forth), and I’ve come to the conclusion that they’re sadly not ready to really use. Sure, use them in experimental sites, and maybe even in mainstream sites in small doses with very particular types of content. But for most content, I found that there’s not enough control over how the content is distributed between columns to make them reliable. I’m not sure if the browser behavior I’ve been seeing is correct or not; the spec is unfortunately not well defined enough to make it clear—at least to me—of how browsers ought to be handling some of the problems I ran across. [...]
17
50 New Useful CSS Techniques, Tools and Tutorials | wrote on June 10, 2010, at 11:54 am:
[...] Deal-breaker problems with CSS3 multi-columns“I’ve been playing around with the new multi-column properties of CSS3 (column-count, column-width, and so forth), and I’ve come to the conclusion that they’re sadly not ready to really use. I found that there’s not enough control over how the content is distributed between columns to make them reliable. I’m not sure if the browser behavior I’ve been seeing is correct or not; the spec is unfortunately not well defined enough to make it clear—at least to me—of how browsers ought to be handling some of the problems I ran across.” [...]
18
TG Designer » 50 New Useful CSS Techniques, Tools and Tutorials wrote on June 10, 2010, at 5:50 pm:
[...] Deal-breaker problems with CSS3 multi-columns“I’ve been playing around with the new multi-column properties of CSS3 (column-count, column-width, and so forth), and I’ve come to the conclusion that they’re sadly not ready to really use. I found that there’s not enough control over how the content is distributed between columns to make them reliable. I’m not sure if the browser behavior I’ve been seeing is correct or not; the spec is unfortunately not well defined enough to make it clear—at least to me—of how browsers ought to be handling some of the problems I ran across.” [...]
19
50 New Useful CSS Techniques, Tools and Tutorials - Programming Blog wrote on June 11, 2010, at 1:27 am:
[...] Deal-breaker problems with CSS3 multi-columns“I’ve been playing around with the new multi-column properties of CSS3 (column-count, column-width, and so forth), and I’ve come to the conclusion that they’re sadly not ready to really use. I found that there’s not enough control over how the content is distributed between columns to make them reliable. I’m not sure if the browser behavior I’ve been seeing is correct or not; the spec is unfortunately not well defined enough to make it clear—at least to me—of how browsers ought to be handling some of the problems I ran across.” [...]
20
50 New Useful CSS Techniques, Tools and Tutorials « Vleerkatcreations wrote on June 11, 2010, at 2:44 am:
[...] Deal-breaker problems with CSS3 multi-columns‘I’ve been playing around with the new multi-column properties of CSS3 (column-count, column-width, and so forth), and I’ve come to the conclusion that they’re sadly not ready to really use. I found that there’s not enough control over how the content is distributed between columns to make them reliable. I’m not sure if the browser behavior I’ve been seeing is correct or not; the spec is unfortunately not well defined enough to make it clear—at least to me—of how browsers ought to be handling some of the problems I ran across.’ [...]
21
123-sale.com Blogs | Blog | 50 New Useful CSS Techniques, Tools and Tutorials wrote on June 11, 2010, at 3:01 am:
[...] Deal-breaker problems with CSS3 multi-columns“I’ve been playing around with the new multi-column properties of CSS3 (column-count, column-width, and so forth), and I’ve come to the conclusion that they’re sadly not ready to really use. I found that there’s not enough control over how the content is distributed between columns to make them reliable. I’m not sure if the browser behavior I’ve been seeing is correct or not; the spec is unfortunately not well defined enough to make it clear—at least to me—of how browsers ought to be handling some of the problems I ran across.” [...]
22
50 New Useful CSS Techniques, Tools and Tutorials – Smashing Magazine wrote on June 11, 2010, at 10:08 am:
[...] Deal-breaker problems with CSS3 multi-columns“I’ve been playing around with the new multi-column properties of CSS3 (column-count, column-width, and so forth), and I’ve come to the conclusion that they’re sadly not ready to really use. I found that there’s not enough control over how the content is distributed between columns to make them reliable. I’m not sure if the browser behavior I’ve been seeing is correct or not; the spec is unfortunately not well defined enough to make it clear—at least to me—of how browsers ought to be handling some of the problems I ran across.” [...]
23
50 New Useful CSS Techniques, Tools and Tutorials | i know idea wrote on June 12, 2010, at 12:44 am:
[...] Deal-breaker problems with CSS3 multi-columns“I’ve been playing around with the new multi-column properties of CSS3 (column-count, column-width, and so forth), and I’ve come to the conclusion that they’re sadly not ready to really use. I found that there’s not enough control over how the content is distributed between columns to make them reliable. I’m not sure if the browser behavior I’ve been seeing is correct or not; the spec is unfortunately not well defined enough to make it clear—at least to me—of how browsers ought to be handling some of the problems I ran across.” [...]
24
50 New Useful CSS Techniques, Tools and Tutorials « CSS Citadel wrote on June 13, 2010, at 2:35 pm:
[...] Deal-breaker problems with CSS3 multi-columns“I’ve been playing around with the new multi-column properties of CSS3 (column-count, column-width, and so forth), and I’ve come to the conclusion that they’re sadly not ready to really use. I found that there’s not enough control over how the content is distributed between columns to make them reliable. I’m not sure if the browser behavior I’ve been seeing is correct or not; the spec is unfortunately not well defined enough to make it clear—at least to me—of how browsers ought to be handling some of the problems I ran across.” [...]
25
Karl wrote on June 16, 2010, at 3:53 am:
Good write up Zoe, I tried this myself with my personal blog redesign this time last year but pretty much came up with the same reasoning for ditching it. The column break stuff was the final nail for me at the time.
Regards, Karl
26
50 New Useful CSS Techniques, Tools and Tutorials « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates wrote on June 17, 2010, at 5:49 am:
[...] Deal-breaker problems with CSS3 multi-columns “I’ve been playing around with the new multi-column properties of CSS3 (column-count, column-width, and so forth), and I’ve come to the conclusion that they’re sadly not ready to really use. I found that there’s not enough control over how the content is distributed between columns to make them reliable. I’m not sure if the browser behavior I’ve been seeing is correct or not; the spec is unfortunately not well defined enough to make it clear—at least to me—of how browsers ought to be handling some of the problems I ran across.” [...]
27
50 New Useful CSS Techniques, Tools and Tutorials | search engine optimization - bloghosting and sale at 123-sale.com wrote on June 28, 2010, at 10:13 pm:
[...] Deal-breaker problems with CSS3 multi-columns “I’ve been playing around with the new multi-column properties of CSS3 (column-count, column-width, and so forth), and I’ve come to the conclusion that they’re sadly not ready to really use. I found that there’s not enough control over how the content is distributed between columns to make them reliable. I’m not sure if the browser behavior I’ve been seeing is correct or not; the spec is unfortunately not well defined enough to make it clear—at least to me—of how browsers ought to be handling some of the problems I ran across.” [...]
28
50 New Useful CSS Techniques, Tools and Tutorials | woogle wrote on June 28, 2010, at 10:14 pm:
[...] Deal-breaker problems with CSS3 multi-columns “I’ve been playing around with the new multi-column properties of CSS3 (column-count, column-width, and so forth), and I’ve come to the conclusion that they’re sadly not ready to really use. I found that there’s not enough control over how the content is distributed between columns to make them reliable. I’m not sure if the browser behavior I’ve been seeing is correct or not; the spec is unfortunately not well defined enough to make it clear—at least to me—of how browsers ought to be handling some of the problems I ran across.” [...]
29
TemplateLand Blog » Blog Archive » 20 Useful CSS3 Tutorials and Resources wrote on July 01, 2010, at 9:20 am:
[...] CSS3 Multi-Columns [...]
30
20 Useful CSS3 Tutorials and Resources | Joiner.ro - Indexare gratuita feed-uri RSS wrote on July 02, 2010, at 2:09 am:
[...] CSS3 Multi-Columns [...]
31
Smashing Magazine Feed: 50 New Useful CSS Techniques, Tools and Tutorials | XtremelySocial.com wrote on July 06, 2010, at 11:13 pm:
[...] Deal-breaker problems with CSS3 multi-columns“I’ve been playing around with the new multi-column properties of CSS3 (column-count, column-width, and so forth), and I’ve come to the conclusion that they’re sadly not ready to really use. I found that there’s not enough control over how the content is distributed between columns to make them reliable. I’m not sure if the browser behavior I’ve been seeing is correct or not; the spec is unfortunately not well defined enough to make it clear—at least to me—of how browsers ought to be handling some of the problems I ran across.” [...]
32
Chris Valleskey wrote on July 20, 2010, at 3:25 am:
Adding “-webkit-margin-bottom-collapse: separate;” to the element that has columns seems to fix the problem you address in the flowing margin section. Is this the rule you had in mind?
33
Zoe Gillenwater wrote on July 20, 2010, at 4:46 pm:
I didn’t know about this property–thanks! I added it to the ul element and it did fix the padding splitting across columns, but not the margin. But even that is a good start!
34
50 New Useful CSS Techniques, Tools and Tutorials « The Day I Wanna be…. wrote on July 21, 2010, at 5:58 am:
[...] Deal-breaker problems with CSS3 multi-columns “I’ve been playing around with the new multi-column properties of CSS3 (column-count, column-width, and so forth), and I’ve come to the conclusion that they’re sadly not ready to really use. I found that there’s not enough control over how the content is distributed between columns to make them reliable. I’m not sure if the browser behavior I’ve been seeing is correct or not; the spec is unfortunately not well defined enough to make it clear—at least to me—of how browsers ought to be handling some of the problems I ran across.” [...]
35
das web ist eh schon zu groß – blog and portfolio of christian radmann » Blog Archive » css3 workshop part1: neue selektoren und pseudo-klassen wrote on July 27, 2010, at 7:59 am:
[...] alles rund um textfluss und spalten [...]
36
das web ist eh schon zu groß – blog and portfolio of christian radmann » Blog Archive » css3 workshop part5: wrote on July 27, 2010, at 8:22 am:
[...] alles rund um textfluss und spalten [...]
37
ROJO PIXEL: El mejor sitio de diseño del mundo wrote on August 06, 2010, at 10:54 am:
[...] Deal-breaker problems with CSS3 multi-columns“I’ve been playing around with the new multi-column properties of CSS3 (column-count, column-width, and so forth), and I’ve come to the conclusion that they’re sadly not ready to really use. I found that there’s not enough control over how the content is distributed between columns to make them reliable. I’m not sure if the browser behavior I’ve been seeing is correct or not; the spec is unfortunately not well defined enough to make it clear—at least to me—of how browsers ought to be handling some of the problems I ran across.” [...]
38
The Ultimate Roundup of 55+ CSS3 Tutorials | Programming Blog wrote on August 09, 2010, at 4:20 pm:
[...] 29. Deal-breaker problems with CSS3 multi-columns [...]
39
The Ultimate Roundup of 55+ CSS3 Tutorials wrote on August 09, 2010, at 5:03 pm:
[...] 29. Deal-breaker problems with CSS3 multi-columns [...]
40
The Ultimate Roundup of 55+ CSS3 Tutorials « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates wrote on August 15, 2010, at 2:18 pm:
[...] 29. Deal-breaker problems with CSS3 multi-columns [...]
41
FaceWord - 50 nouvelles techniques CSS, des outils et didacticiels wrote on August 25, 2010, at 12:03 pm:
[...] problèmes Deal-brise avec CSS3 multi-colonnes «J’ai été jouer avec les propriétés multi-colonnes nouvelle CSS3 (colonne de comptage, de largeur de colonne, et ainsi de suite), et je suis venu à la conclusion qu’ils ne sont malheureusement pas vraiment prêt à utiliser. J’ai trouvé qu’il n’y a pas suffisamment de contrôle sur la façon dont le contenu est distribué entre les colonnes afin de les rendre fiables. Je ne sais pas si le comportement du navigateur, j’ai été voir est correcte ou non, la spécification n’est malheureusement pas assez bien définis pour le rendre clair, du moins pour moi, de la façon dont les navigateurs doivent être de manipuler certains des problèmes que j’ai couru partout. « [...]