Avoid breaking of columns inside CSS3 multi-column layouts

Sometimes, when you are working with CSS3 multi-column layouts, you will run into the problem of content being split across columns in a way that makes no sense at all. In the screenshot below, you can see the problem I was running into when showing a simple table with a few percentages in it.

The table appeared right at the point where my CSS wanted to split the content into multiple columns. The result is one table row shown at the bottom of the first column, where the rest of the table is shown at the top of the second column, which is nasty.

There's a simple way to prevent this from happening, which is using column-break-inside (browser support may vary). In my case, the CSS to avoid the table from being split across columns looks somewhat similar to this:

.articles table
{ 
  -webkit-column-break-inside:avoid; 
  -moz-column-break-inside:avoid; 
  column-break-inside:avoid; 
} 

This will tell the multiple column specification to avoid splitting tables across columns.

Something else that can be done is e.g. forcing a h2 tag to always start at the top of a column. The code below will make sure that heading2 titles always show up at the top of a new column.

.articles h2
{ 
  -webkit-column-break-before:always; 
  -moz-column-break-before:always; 
  column-break-before:always;
} 

Of course, browser support is the tricky part here.