Is it possible to create a column break within a CSS multicolumn design?

Question

Is it possible to create a column break within a CSS multicolumn design?

My text content sprawls over a CSS multicolumn layout with two, three, or four columns, utilizing CSS hyphenation. Sometimes, I want to terminate the text in one column early to allow the next paragraph to begin at the top of the next column.

Is there a straightforward way to introduce a <column-break> to commence the remaining text in the top of the upcoming column?

Currently, I resort to padding the column (requiring the column-break) with numerous   tags in the HTML to extend it and achieve the desired effect.

Moreover, each time a change is made to either column, the number of   tags needed falls short and requires reevaluation.

#multicolumn{
    -webkit-column-count: 2;
    -moz-column-count: 2;
    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>

Check out my JSFiddle.

Is there a way to gracefully "end" the first column and instruct the browser to continue the rest of the content in the subsequent columns?

https://i.sstatic.net/Nua57.png

javascript css layout css-multicolumn-layout

Answer 1

Answer №1

5. Column breaks

When content is displayed in multiple columns, the browser needs to decide where to place column breaks. This is similar to how content is broken into pages.

To address column breaks, three new properties are introduced: ‘break-before’, ‘break-after’, and ‘break-inside’. These properties use the same values as ‘page-break-before’, ‘page-break-after’, and ‘page-break-inside’ [CSS21], with additional keyword values.

These properties define page/column break behavior before/after/inside the generated box as outlined in [CSS21]:

auto: Neither enforces nor prohibits a page/column break before (after, inside) the generated box.

always: Always enforces a page break before (after) the generated box.

avoid: Avoids a page/column break before (after, inside) the generated box.

left: Forces one or two page breaks before (after) the generated box to format the next page as a left page.

right: Forces one or two page breaks before (after) the generated box to format the next page as a right page.

This specification introduces new values:

page: Always enforces a page break before (after) the generated box.

column: Always enforces a column break before (after) the generated box.

avoid-page: Avoids a page break before (after, inside) the generated box.

avoid-column: Avoids a column break before (after, inside) the generated box.

Therefore, you can utilize the following code snippet:

#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, support for these properties is limited to Internet Explorer 10+ and Opera 11.10-12.1.

Answer 2

5. Column breaks

When content is displayed in multiple columns, the browser needs to decide where to place column breaks. This is similar to how content is broken into pages.

To address column breaks, three new properties are introduced: ‘break-before’, ‘break-after’, and ‘break-inside’. These properties use the same values as ‘page-break-before’, ‘page-break-after’, and ‘page-break-inside’ [CSS21], with additional keyword values.

These properties define page/column break behavior before/after/inside the generated box as outlined in [CSS21]:

auto: Neither enforces nor prohibits a page/column break before (after, inside) the generated box.

always: Always enforces a page break before (after) the generated box.

avoid: Avoids a page/column break before (after, inside) the generated box.

left: Forces one or two page breaks before (after) the generated box to format the next page as a left page.

right: Forces one or two page breaks before (after) the generated box to format the next page as a right page.

This specification introduces new values:

page: Always enforces a page break before (after) the generated box.

column: Always enforces a column break before (after) the generated box.

avoid-page: Avoids a page break before (after, inside) the generated box.

avoid-column: Avoids a column break before (after, inside) the generated box.

Therefore, you can utilize the following code snippet:

#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, support for these properties is limited to Internet Explorer 10+ and Opera 11.10-12.1.

Answer 3

Answer №2

To address this issue, consider enclosing your text within paragraphs (p tags) to maintain semantics and ensure that the second paragraph does not break, especially if it does not exceed one column in length.

You can accomplish this by utilizing the break-inside CSS property. https://developer.mozilla.org/en/docs/Web/CSS/break-inside

Here is a 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>

Answer 4

To address this issue, consider enclosing your text within paragraphs (p tags) to maintain semantics and ensure that the second paragraph does not break, especially if it does not exceed one column in length.

You can accomplish this by utilizing the break-inside CSS property. https://developer.mozilla.org/en/docs/Web/CSS/break-inside

Here is a 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>

Answer 5

Answer №3

To differentiate between paragraphs, use the  tags.

<div id="multicolumn">
<p>Lorem 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>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>

Here is the CSS code:

@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%;

You can view a live example here.

The  tags help maintain paragraph structure, while the 'filler' section (highlighted in red) creates a space free of text.

Answer 6

To differentiate between paragraphs, use the  tags.

<div id="multicolumn">
<p>Lorem 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>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>

Here is the CSS code:

@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%;

You can view a live example here.

The  tags help maintain paragraph structure, while the 'filler' section (highlighted in red) creates a space free of text.

Answer 7

Answer №4

To address your specific needs, it is highly recommended to implement a grid system. Please execute the code 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;">Lorem ipsum dolor sit amet, consectetur 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;">
        Another paragraph describing a similar concept. 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>

Answer 8

To address your specific needs, it is highly recommended to implement a grid system. Please execute the code 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;">Lorem ipsum dolor sit amet, consectetur 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;">
        Another paragraph describing a similar concept. 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>

Answer 9

Answer №5

To achieve a clean layout, consider enclosing each column within a separate div using 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>

For those using a wysiwyg editor, ensure you have access to a source button to enclose your columns in div tags. By implementing the provided code, managing columns will be simplified and responsive design can be easily achieved.

Answer 10

To achieve a clean layout, consider enclosing each column within a separate div using 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>

For those using a wysiwyg editor, ensure you have access to a source button to enclose your columns in div tags. By implementing the provided code, managing columns will be simplified and responsive design can be easily achieved.

Answer 11

Answer №6

To expand further on what @Oriol mentioned, you have the ability to specify the width so that the first column always occupies the left half of the container.

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

Answer 12

To expand further on what @Oriol mentioned, you have the ability to specify the width so that the first column always occupies the left half of the container.

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

Answer 13

Answer №7

Although this may not be the exact CSS multicolumn feature you were looking for to create column breaks, the visual outcome is quite similar.

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

<div class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>

<div class="column">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

Check out the jsFiddle here: http://jsfiddle.net/Vbr9d/242/

Answer 14

Although this may not be the exact CSS multicolumn feature you were looking for to create column breaks, the visual outcome is quite similar.

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

<div class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>

<div class="column">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

Check out the jsFiddle here: http://jsfiddle.net/Vbr9d/242/

Is it possible to create a column break within a CSS multicolumn design?

Answer №1

5. Column breaks

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Navigating through Index in #each in emberjs

Transitioning from GeometryUtils.merge() to geometry.merge()

How can one discern the most effective method to identify JavaScript code that alters particular HTML content on a webpage?

Customizable form with dynamic content and interactive button within a set location

Creating a customized plugin in JavaScript that utilizes a local JSON/GeoJSON file

Display the Image Element in Angular only when the image actually exists

What could be causing Highchart to return the error message "Typeerror: undefined variable byte"?

Having trouble with overriding an @media query for material-ui react components?

"Enhancing web interactivity with AJAX requests and dynamic functionality in web

Typehead.js on Twitter is displaying the full query instead of just the value

Learn how to create a visually stunning CSS menu by centering a background image from the website cssmenumaker

External variable accessing the getjson function

How can I use console.log to display a message when a variable reaches a specific value?

Automatically resizing font to fit the space available

Access all areas with unlimited password possibilities on our sign-in page

Transforming Several Dropdowns using jQuery, JSON, and PHP

Looking to decrease Cumulative Layout Shift (CLS) on the NextJS website for enhanced performance

Callback in React Setstate triggered, leading to a delay in rendering

displaying only the date in bootstrap-datetimepicker

Looking for assistance with updating a JavaScript Object Array and embedding it into a function