How do I force my CSS3 columns to break only at line breaks?

Question

I'm currently working on a page that uses a bunch of fieldsets on one form page that also implements CSS3 columns.

The problem is the columns wrap in such a way that sometimes half a fieldset is left behind when breaking to the next column.

On the project I'm actually working on, I'm staring at a fieldset legend in Chrome 15 that is spliced in half with the top half of the letters at the bottom of one column and the bottom half of the letters at the top of the next column. In Firefox 7, I don't see this problem (maybe they already are breaking ONLY at line breaks or after block elements).

I don't think this is a Chome-specific bug, I think it's just not specified how it should be done yet, or something.

Anyway, I want to explicitly tell all column-supporting browsers to break in between those fieldsets. Thanks.

I made a mockup of the situation. See this jsFiddle. (Obviously looks a little different than the project I described above, but same bug.)

Answer 1

Looks like webkit has implemented column-break-inside, which you can add to the fieldset rule to stop it splitting them across columns

fieldset {
    border: 1px solid #ddd;
    padding: 1.0em;
    -webkit-column-break-inside: avoid;
}

Answer 2

Just general FYI for others that bump into this forum and need a solution for Firefox.

At the moment writing this, Firefox 22.0 didn't support column-break-inside property even with -moz- prefix.

But the solution is quite simple: Just use display:table;. You can also do **display:inline-block; The problem with these solutions is that the list items will lose their list style item or bullet icon.

**Also, one problem I've experienced with display:inline-block; is that if the text in two consecutive list items is very short, the bottom item will wrap itself up and inline with the one above it.

display:table; is the least worst of both solutions.

More info here: http://trentwalton.com/2012/02/13/css-column-breaks/