User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2) Gecko/20100115 Firefox/3.6 GTBDFff GTB7.0 Build Identifier: It doesn't appear that the column breaking part of the css3 spec is implemented: http://www.w3.org/TR/css3-multicol/#column-breaks I am building a webapp that doesn't need to work in IE, and the lack of support for break-inside: avoid-column; is causing problems. Reproducible: Always

This bug makes CSS3 multi-column layouts entirely useless for everything other than text. half implemented things don't help anybody!

The column flow also doesn't happen for tables. These should column break at rows across columns without additional tags. As above the use is for a webapp and XULRunner application. This could be addressed with colbreak inserted into the <tr>, but would probably be better if tables column flowed like text, as part of the standard flow.

richardigp's comment points to a workaround for some of this functionality until it is implemented: <table><tr><td style="column-break-inside: avoid;">(non-breaking content here</td></tr></table> Very definitely a hack, but should be forward-compatible unless a browser supports splitting table cells between columns without supporting column-break-inside.

I think we should probably do this as part of bug 132035, or at least do bug 132035 first with this bug in mind.

+1 Also, instead of using: <table><tr><td style="column-break-inside: avoid;">(non-breaking content here</td></tr></table> Just use something like: .column-fix { -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; -o-column-break-inside: avoid; column-break-inside: avoid; display: table; } Again, it's a hack, but it makes your HTML much cleaner.

It's probably bad manners to drill things but I am not sure this is part of bug 132035. The issue is tables in columns is a flow layout paradigm not a page issue (or am I wrong?). Therefore tables should flow across the columns to reflect the layout intention of the author. The real issue is should header rows repeat on columns but that is probably a little too "printy". This is of concern to me/us because our XULRunner based ePub3 reader AZARDI (listed in XULRunner hall of honor) cannot present tables effectively in a controlled viewport/columns based presentation. Webkit handles table flow OK, although it too has some serious column flow issues. It is great to work with the native flow-power of the rendering engine rather than work around it.

Please fix this ASAP. It is causing people not to use the multi column function. I am trying to use for a mega menu and while it looks great in Safari and Chrome, it fails miserably in FF.

This needs to be fixed ASAP. How can one even think of implementing CSS Columns without the ability to control breaks? Regrettably, this is becoming typical of Mozilla as of late - implementing things half-way and then leaving them there (this bug was filed in 2010!). Microsoft got it right in IE10 (and without prefixes!). Do you want me to switch back to IE?

page-break-inside:avoid just landed on nightly builds.

Excellent, thanks. Will this CSS avoid an element being broken up by a column as well as by a page?

Thanks!!!!

(In reply to EB from comment #12) > Thanks!!!! I hope it works for columns as well as pages!!!

(In reply to EB from comment #13) > (In reply to EB from comment #12) > > Thanks!!!! I hope it works for columns as well as pages!!! Just tested and it doesn't appear to work for columns :(

It does now - FF v20.0 :-)

Bug 775618 will alias some existing page-break-* properties. Does this fix (part of) the initial problem?

Scott, still working on this?

(In reply to Florian Bender from comment #17) > Scott, still working on this? Nope, I'm not working on this at the moment. Feel free to take it if you want. :)

Temporary workaround is to add 'display:table' on element with 'page-break-inside' or just wrap it with table.

CSS multi-columns implementation is a mess between browsers. I came to this : .column-fix { break-inside: avoid-column; -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; -o-column-break-inside: avoid; column-break-inside: avoid; page-break-inside: avoid; display: table; } But display:table workaround causes issues on other browsers where break-* properties are well supported. So I have to specifically load a stylesheet for Firefox. This puts FF on the same level as IE from a web developer perspective :'(

FWIW, to completely prevent column breaks in Firefox, I've found that using the combination: display: inline-block; width: 100%; seems to work better as a workaround than `display: table`, which more often interferes with other styles (eg. padding).

The definition of the column breaks was moved to the CSS Fragmentation Module in the meantime. Therefore I updated the summary accordingly. So, regarding the spec., I guess this bug covers the following properties and values: break-before: avoid-column | column; break-after: avoid-column | column; break-inside: avoid-column; Sebastian