Avoid breaking of columns inside CSS3 multi-column layouts

Joris Hens

Jul 08, 2013 · 1 min read

Hi! I'm GoodBytes. Web developer, teacher and souschef.

Thanks for dropping by! I think you might like my latest app MeetMonocle.com — it makes it super easy to ask your clients for web design feedback.

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.

Column Break Inside CSS3

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

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

Of course, browser support is the tricky part here.

« CSS3 multiple column layouts fallback for Internet Explorer
Keep on reading
A mechanic needs a garage, creative people need a Creativity Gym »