how-do-you-stop-element-breaking-inside-a-css3-multi-column-layout.md

title	authors	intro	types	categories	published	updated	status
How do you stop element breaking inside a CSS3 multi column layout	thebeebs	I came across a rather annoying feature today when...	shorts	article web html5at5	2013/02/28 12:00:00	2013/02/28 13:00:00	archived

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:

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:

break-inside:avoid;

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."

Code can be found here: http://jsfiddle.net/zR2FY/

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.