Using CSS multi-column layouts

  • Revision slug: CSS/Using_CSS_multi-column_layouts
  • Revision title: Using CSS multi-column layouts
  • Revision id: 51594
  • Created:
  • Creator: Roc
  • Is current revision? No
  • Comment

Revision Content

Introduction

People have have trouble reading text if lines are too long; if it takes too long for the eyes to move from the end of the one line to the beginning of the next, they lose track of which line they were on. Therefore, to make maximum use of a large screen, authors should have limited-width columns of text placed side by side, just as newspapers do. Unfortunately this is impossible to do with CSS and HTML without forcing column breaks at fixed positions, or severely restricting the markup allowed in the text, or using heroic scripting.

A CSS3 draft suggests some new CSS properties to support this feature. In Firefox 1.5 and later we have implemented a subset of these properties to behave as described in the draft (with one exception explained below).

Robert O'Callahan's blog uses CSS columns; check it out in a Firefox 1.5 build.

Using Columns

Column Count And Width

Two CSS properties control whether and how many columns will appear: -moz-column-count and -moz-column-width.

-moz-column-count sets the number of columns to a particular number. E.g.,

<div style="-moz-column-count:2">In preparation for the release of Mozilla
Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific
Daylight Time (UTC -0700). After this point, no more checkins will be accepted
for Firefox 1.5 Beta 1, which is set for release on Thursday.</div>

will display the content in two columns (if you're using Firefox 1.5 or greater):

In preparation for the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins will be accepted for Firefox 1.5 Beta 1, which is set for release on Thursday.

-moz-column-width sets the minimum desired column width. If -moz-column-count is not also set, then the browser will automatically make as many columns as fit in the available width.

<div style="-moz-column-width:20em;">In preparation for the release of Mozilla
Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific
Daylight Time (UTC -0700). After this point, no more checkins will be accepted
for Firefox 1.5 Beta 1, which is set for release on Thursday.</div>

becomes:

In preparation for the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins will be accepted for Firefox 1.5 Beta 1, which is set for release on Thursday.

The exact details are described in the CSS3 draft.

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.

Height Balancing

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. Firefox does this.

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. For example, articles at http://iht.com/ do this (using script). 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 new column. This mode is also much more efficient for layout.

Column Gaps

By default each column is directly adjacent to the next column. This usually doesn't look good. You can using CSS padding within the columns to improve the situation, but it's often easier to apply the -moz-column-gap property to the multicolumn block:

<div style="-moz-column-width:20em; -moz-column-gap:2em;">In preparation for
the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight
at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins
will be accepted for Firefox 1.5 Beta 1, which is set for release on
Thursday.</div>
In preparation for the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins will be accepted for Firefox 1.5 Beta 1, which is set for release on Thursday.

Graceful Degredation

The -moz-column properties will just be ignored by non-columns-supporting browsers. Therefore it's relatively easy to create a layout that will display in a single column in those browsers and use multiple columns in Firefox 1.5.

Conclusion

CSS3 columns are a new layout primitive that will help Web developers make the best use of screen real estate. Imaginative developers may find many uses for them, especially with the automatic height balancing feature.

Additional References

  • http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html

Revision Source

<h3 name="Introduction"> Introduction </h3>
<p>People have have trouble reading text if lines are too long; if it takes too long for the eyes to move from the end of the one line to the beginning of the next, they lose track of which line they were on. Therefore, to make maximum use of a large screen, authors should have limited-width columns of text placed side by side, just as newspapers do. Unfortunately this is impossible to do with CSS and HTML without forcing column breaks at fixed positions, or severely restricting the markup allowed in the text, or using heroic scripting.
</p><p><a class="external" href="http://www.w3.org/TR/2001/WD-css3-multicol-20010118">A CSS3 draft</a> suggests some new CSS properties to support this feature. In Firefox 1.5 and later we have implemented a subset of these properties to behave as described in the draft (with one exception explained below).
</p><p><a class="external" href="http://weblogs.mozillazine.org/roc/">Robert O'Callahan's blog</a> uses CSS columns; check it out in a Firefox 1.5 build.
</p>
<h3 name="Using_Columns"> Using Columns </h3>
<h4 name="Column_Count_And_Width"> Column Count And Width </h4>
<p>Two CSS properties control whether and how many columns will appear: <code>-moz-column-count</code> and <code>-moz-column-width</code>.
</p><p><code>-moz-column-count</code> sets the number of columns to a particular number. E.g.,
</p>
<pre>&lt;div style="-moz-column-count:2"&gt;In preparation for the release of Mozilla
Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific
Daylight Time (UTC -0700). After this point, no more checkins will be accepted
for Firefox 1.5 Beta 1, which is set for release on Thursday.&lt;/div&gt;
</pre>
<p>will display the content in two columns (if you're using Firefox 1.5 or greater):
</p>
<div style="-moz-column-count:2">In preparation for the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins will be accepted for Firefox 1.5 Beta 1, which is set for release on Thursday.</div>
<p><code>-moz-column-width</code> sets the minimum desired column width. If <code>-moz-column-count</code> is not also set, then the browser will automatically make as many columns as fit in the available width.
</p>
<pre>&lt;div style="-moz-column-width:20em;"&gt;In preparation for the release of Mozilla
Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific
Daylight Time (UTC -0700). After this point, no more checkins will be accepted
for Firefox 1.5 Beta 1, which is set for release on Thursday.&lt;/div&gt;
</pre>
<p>becomes:
</p>
<div style="-moz-column-width:20em;">In preparation for the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins will be accepted for Firefox 1.5 Beta 1, which is set for release on Thursday.</div>
<p>The exact details are described in <a class="external" href="http://www.w3.org/TR/2001/WD-css3-multicol-20010118">the CSS3 draft</a>.
</p><p>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.
</p>
<h4 name="Height_Balancing"> Height Balancing </h4>
<p>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. Firefox does this.
</p><p>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. For example, articles at http://iht.com/ do this (using script). Therefore we extend the draft so that if the CSS <code>height</code> property is set on a multicolumn block, each column is allowed to grow to that height and no further before adding new column. This mode is also much more efficient for layout.
</p>
<h4 name="Column_Gaps"> Column Gaps </h4>
<p>By default each column is directly adjacent to the next column. This usually doesn't look good. You can using CSS padding within the columns to improve the situation, but it's often easier to apply the <code>-moz-column-gap</code> property to the multicolumn block:
</p>
<pre>&lt;div style="-moz-column-width:20em; -moz-column-gap:2em;"&gt;In preparation for
the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight
at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins
will be accepted for Firefox 1.5 Beta 1, which is set for release on
Thursday.&lt;/div&gt;
</pre>
<div style="-moz-column-width:20em; -moz-column-gap:2em;">In preparation for the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins will be accepted for Firefox 1.5 Beta 1, which is set for release on Thursday.</div>
<h4 name="Graceful_Degredation"> Graceful Degredation </h4>
<p>The -moz-column properties will just be ignored by non-columns-supporting browsers. Therefore it's relatively easy to create a layout that will display in a single column in those browsers and use multiple columns in Firefox 1.5.
</p>
<h3 name="Conclusion"> Conclusion </h3>
<p>CSS3 columns are a new layout primitive that will help Web developers make the best use of screen real estate. Imaginative developers may find many uses for them, especially with the automatic height balancing feature.
</p>
<h3 name="Additional_References"> Additional References </h3>
<ul><li> http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html
</li></ul>
Revert to this revision