Can I set a column break in a CSS multicolumn layout?

Question

I have a big paragraph of text flowing into a CSS multicolumn layout stretching, say, two, three, or four columns using CSS hyphening. At some point, one of the column's text needs to be ended earlier in order to allow the rest of the paragraph to start at the top of the second column.

Is there any way we can simply set a <column-break> to start the rest of the text at the top of the next column?

Currently I'm stuffing the column (that needs the column-break) with a lot of <br>s to lengthen the column in HTML in order to achieve the effect.

Furthermore, whenever something is changed in either of the columns, the amount of <br> stuffing falls short and needs to be reassessed.

#multicolumn{
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    
}

<div id="multicolumn">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.
<br>
<br>
<br>
<br>
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>

See my JSFiddle.

Is there any way to "end" the first column elegantly and tell the browser to start the rest of the content in the next columns?

Apocrine

Do you have any code? – Sherrilsherrill

developer.mozilla.org/en-US/docs/Web/CSS/break-before - A possibility. – Sherrilsherrill

@Sherrilsherrill sofar I have just the jsfiddle and no elegant (css) solution. As you can see the many <br> are really no answer, thats why i left out the code as i did not want an "embarrassingly bad start" so to speak... Thanks! – Apocrine

I just tried a layout like this, browsers arent there yet. You still have to do use JS to get this done. Isotope is probably what you need. – Meletius

What are the requirements of the solution? Does it have to be css or javascript based? Does it need to be responsive? Or is the goal just the easiest path to achieve that layout and it only needs to appear as shown? – Wrack

@Wrack thanks for your question, i wil clarify this: in this case I am searching for a css solution only, unless this is absolutely impossible to send a simple <column-break> command in the html to go to next column. in which case we are left with nothing else than a javascript solution. it should be simple clean as little as code as possible. Its a shame css still has not grown to support such simple commands... – Apocrine

@SamEftegari Why not use a table? I mean I know css3, blah blah blah, but tables are pretty much made for these types of layouts. If it needed to be responsive I wouldn't suggest it, but if the goal is the path of least resistance for this one layout, an actual table would be very easy to implement. I know it's not 1996 or anything, but tables do still fill certain use cases and work in all desktop browsers, and also have added printing benefits with use of headers and footers. – Wrack

am I missing something? Why did nobody suggest something like jsfiddle.net/Vbr9d/241 ? – Fissirostral

@Fissirostral visuallyit looks good, but technically that is not the CSS multicolumn feature I am targeting to column-break in. If you add your idea and jsfiddle as answer, I will +1 it though, because it seems my simple answer is not so simple to solve anno 2015.... – Apocrine

Answer 1

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.

Donelu

I've ran your code and I'm seeing columns on firefox too! – Clash

Firefox supports multicolmns (with vendor prefix). It doesn't support manual column breaks with break-*. – Donelu

Answer 2

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>

Starshaped

Answer 3

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.

Kilohertz

i think this will not work. try with larger text on first paragraph. – Forby

Answer 4

For your situation, the best solution is to use a grid system. Please run the snippet in Full Page view.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <div class="row">
 <div class="col-sm-6" style="background-color:lavenderblush;">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="col-sm-6" style="background-color:lavender;">
        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>
  </div>
</div>

</body>
</html>

Forby

Answer 5

If you are able to wrap each column in a div, then the most elegant solution would be to use a bootstrap style grid.

    .row {
      margin: 0 -15px;
    }
    .column {
      box-sizing: border-box;
      float: left;
      padding: 0 15px;
      width: 50%;
    }

<div id=row">
  <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>

If you are using a wysiwyg to enter copy, then you must have access to a source button to wrap your columns in divs. Then using the above code, columns become very simple; and easily made responsive.

Antiknock

Answer 6

Elaborating more on @Oriol answer you can set the width so first column will always use left half.

#multicolumn {
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
}

.column:nth-of-type(1) {
 width:50%;
}

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

Hewie

Answer 7

Technically not the CSS multicolumn feature you are targeting to column-break in, but this looks visually similar.

.column {
   width : 46%;
   margin: 0% 2%;
   height: 100%;
   float: left;
}

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

Here's the jsFiddle : http://jsfiddle.net/Vbr9d/242/

Fissirostral

Thanks for your practical thinking and for provided exampe. This works for 2, 3, 4, ... n columns too. – Apocrine