How do you stop element breaking inside a CSS3 multi column layout

I came across a rather annoying feature today when I was trying to create a layout with CSS3 multi column. I wanted to stack some divs on top of each other in columns.

My first attempt lead to this, which was not what I wanted:

Shows a CSS test

I wanted the tile's to break to the next column  if they didn't fit into the column in their entirety. It took me a while to find out what I need to do was add the following code to each div:


This tell the browser to avoid breaking an element in half or as the spec puts it:  "Avoid a page/column break before inside the generated box."

My CSS layout experiment, this one now works.

Code can be found here:

Please Note: All the code is standards based (i.e. Doesn't include any vendor prefixes) At the time of writing only IE10 and Opera 12 support this unprefixed syntax, if you are using Chrome then they use a slightly different syntax and -webkit- prefixes.

Published by thebeebs

Martin works for Microsoft as a Software Developer. He’s been a developer since the late 90s and loves figuring out problems and experimenting with code.