Web Development

Working with the CSS3 Multi-column Layout Module

Ryan Boudreaux explains the new styling for the CSS3 Multi-column Layout Module with code and display examples of different styles.
Continuing where I left off from the previous piece First look at CSS3 web design elements this segment will highlight the CSS3 Multi-Column Layout module. We know that most computer screens are wider than they are tall, and as such; most browsers open to the full screen width.

According to the W3C, the average browser display statistics show that most visitors are using a screen resolution higher than 1024x768 pixels. Many websites do not take advantage of all the available real estate, often leaving content blank to the left or right of the fixed-width.

One of the common issues with online reading is that the lines of text can become too long and hard to read, forcing the eyes to move from left to right across 1024 pixels or more. Until now, being able to display textual content in column format has been a superhuman effort with coding and scripting by forcing column breaks at fixed positions.

CSS3 multi-column layout

CSS3 allows for alignment of newspaper style columns, which helps websites take advantage of the vertical spaces available in browser windows. The CSS Multi-column Layout Module is a W3C candidate recommendation as of April 12, 2011, and is an individual module of the CSS3 specification; it describes how content can be flowed into multiple columns, for example, and can be defined with a gap and a rule between each column in an assigned column-count if desired.

The multi-column layout module sets forth the following basic rules to enable column styling:

  • column-count - determines the number of columns into which the content of the element will flow
  • column-width - describes the best possible width of each column
  • column-gap -  sets the padding between columns
  • column-rule - defines a border between columns, and can define the color as well

The Multi-Column Layout module is currently only supported in Mozilla-based browsers and Safari 3+, which have the CSS prefixed within the properties respectively noted -moz- and -webkit-.

According to the Mozilla Developers Network (MDN), for CSS3 columns in a multicolumn block, content is automatically flowed from one column into the next as needed. All HTML, CSS and DOM functionality is supported within columns, as are editing and printing. The MDN also states the following with regard to height balancing.

Height balancing

The Mozilla Developer Network notes on the CSS3 draft specifies that the column heights must be balanced: that is, the browser automatically sets the maximum column height so that the heights of the content in each column are approximately equal. However, in some situations it is also useful to set the maximum height of the columns explicitly, and then lay out content starting at the first column and creating as many columns as necessary, possibly overflowing to the right. Therefore we extend the draft so that if the CSS height property is set on a multicolumn block, each column is allowed to grow to that height and no further before adding a new column. This mode is also much more efficient for layout.

This example for column styling demonstrates the div set to have columns at least 12em wide. The exact number of columns will depend on the available space within the web page, and in this case the global div height=200px, and width=800px as set in the following styling code:

#content > div {
height: 200px; width:800px;
}

The pre-fixes for moz and webkit are provided in addition in this example:

.column_width {
      -moz-column-width: 12em;
      -webkit-column-width: 12em;
      column-width: 12em;
}

Here's a snippet of the HTML div classed for column width styling:

<div class="column_width">
<p><strong>Multi-Column Layout Example</strong></p>
<p> &quot;Lorem ipsum dolor s....<img align="left" src=... width="50" height="50" style="padding:5px;" alt="Image here" title="Image here" /> reprehenderit in voluptate velit esse cillum dolore eu fugiat ....</div>
</div>
This code displays as Figure A in Chrome (click to enlarge images):

Figure A

With the div height and width rule commented out, or turned off, Figure B shows the result as displayed in Chrome in full screen view; in other words, the content within the columns scales to the available space on the page:

Figure B

Below is the result when the browser screen is compressed to approximately 675px wide:

Figure C

In the example below, the number of columns is fixed with the column-count set to 3; as such, the column widths will vary depending on the available width of the browser.

.column_count {
      -moz-column-count: 3;
      -webkit-column-count: 3;
      column-count: 3;
}
Using the similar HTML snippet as above with the div now set to <div class="column_count">, Figure D is the result as displayed in Chrome:

Figure D

This example shows the same column count styling with a column-count of 3, with the added column-gap equaling 1em, and a solid black 1px column-rule:

.column_count {
      -moz-column-count: 3;
      -webkit-column-count: 3;
      -moz-column-gap: 1em;
      -moz-column-rule: 1px solid black;
      -webkit-column-gap: 1em;
      -webkit-column-rule: 1px solid black;
      column-count: 3;
      column-gap: 1em;
      column-rule: 1 px solid black;
}

Below is the result as displayed in Chrome:

Figure E

In the example below for column-span, the rule is set for all level 2 headings with a span equal to all, and with a background set to a light gray hue. It uses a similar HTML snippet with the title paragraph changed to <h2> and moved within the body of the text:

h2 {
      -moz-column-span: all; background: #DDDDDD;
      -webkit-column-span: all; background: #DDDDDD;
      column-span: all; background: #DDDDDD;
}

Figure F

The column properties are indexed within the W3C specification, and relate to block-level elements, non-replaced block-level elements, and multicol elements. Several of them including those sampled in this post are displayed in the table provided by the W3C below (click to enlarge):

Note: In continuous media, the column-fill property will only be consulted if the length of columns has been constrained. Otherwise, columns will automatically be balanced, and this property does not have any effect in overflow columns. In paged media, this property will only have effect on the last page the multicol element appears on.

The next segment in the CSS3 series will review background images and their display methods.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

3 comments
Ryan Boudreaux
Ryan Boudreaux

Article or section would be the perfect selection for maintaining HTML5 compliance. I used div in the examples, however, it is easily interchangable with HTML5 elements.

Spitfire_Sysop
Spitfire_Sysop

Shouldn't you be using "article" or "section" instead of div?

Editor's Picks