Can I set a column break in a CSS multicolumn layout?
5. Column breaks
When content is laid out in multiple columns, the user agent must determine where column breaks are placed. The problem of breaking content into columns is similar to breaking content into pages.
Three new properties are introduced to allow column breaks to be described in the same properties as page breaks: ‘break-before’, ‘break-after’, and ‘break-inside’. These properties take the same values as ‘page-break-before’, ‘page-break-after’, and ‘page-break-inside’ [CSS21]. In addition, some new keyword values are added.
These properties describe page/column break behavior before/after/inside the generated box. These values are normatively defined in [CSS21]:
auto: Neither force nor forbid a page/column break before (after, inside) the generated box.always: Always force a page break before (after) the generated box.avoid: Avoid a page/column break before (after, inside) the generated box.left: Force one or two page breaks before (after) the generated box so that the next page is formatted as a left page.right: Force one or two page breaks before (after) the generated box so that the next page is formatted as a right page.This specification adds the following new values:
page: Always force a page break before (after) the generated box.column: Always force a column break before (after) the generated box.avoid-page: Avoid a page break before (after, inside) the generated box.avoid-column: Avoid a column break before (after, inside) the generated box.
Therefore, you could use something like
#multicolumn { -webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count: 2; /* Firefox */ column-count: 2;}.column { break-before: column; break-after: column;}<div id="multicolumn"> <div class="column">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div> <div class="column">SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div></div>However, only Internet Explorer 10+ and Opera 11.10-12.1 seem to support those properties.
One way to tackle this would be to actually wrap your text in paragraphs (p tags), as you should do for semantics as well, and not allow your 2nd paragraph to break, given it is never longer then 1 column.
This can be achieved by using the break-inside CSS property.https://developer.mozilla.org/en/docs/Web/CSS/break-inside
Code example based on your snippet:
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 700); #multicolumn { -webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count: 2; /* Firefox */ column-count: 2;}p { font-size: 1em; line-height: 1.4; margin: 0; padding: 0 0 1.4em;}p:nth-of-type(2) { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid;} <div id="multicolumn"> <p>FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</p> <p>SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p></div>
Use the <p> tags to distinguish between paragraphs.
<div id="multicolumn"><p>FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</p><div id="filler"></div><p>SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p></div>And the CSS
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);#multicolumn{-webkit-column-count: 2; /* Chrome, Safari, Opera */-moz-column-count: 2; /* Firefox */column-count: 2;}#filler {float: left;position: relative;background-color: #f00;height: 120px;width: 50%;http://jsfiddle.net/mnz2h9hr/2/
The <p> tags keeps the paragraphs together, and the 'filler' (marked in red) keeps an area free of text.