1. Computing

Discuss in my forum

Multi-column Layout with CSS3

Design Your Site in Columns Using CSS3

By

Columns are a great way to display large blocks of text. Because of newspapers, most people are used to reading text in columns and automatically track from the bottom of the first column to the top of the second. Unfortunately, web pages have not had a good way to display multiple columns, until now. CSS3 has a module called “Multi-column layout” that helps you define columns in your web page layouts and flow your text across them.

There are ten new CSS3 properties to help you define columns on your pages:

  • column-count
    Defines the number of columns
  • column-width
    Defines the width of each column
  • column-min-width
    Defines the minimum width of each column
  • column-width-policy
    Defines whether column widths are flexible or strict when there is extra space
  • column-gap
    Defines the width of the space between columns
  • column-rule
    Defines the width, style, and color of the line between the columns
  • column-rule-color
    Defines the color of the line between the columns
  • column-rule-style
    Defines the style (solid, dashed, dotted, etc.) of the line between the columns
  • column-rule-width
    Defines the width of the line between the columns
  • column-span
    Defines the number of columns an element inside the colmns should span (similar to colspan in HTML tables)

CSS3 columns are created out of box elements (like DIV) that contain more blocks of text (like paragraphs). Text that is in an element with columns will wrap from the bottom of the first column to the top of the second column and so on through the columns until all the space is filled.

I have put up an example of a DIV with five paragraphs of text. Then right below it is the exact same DIV (the only difference is the id) that I've styled to have two columns. (Note: the examples don't work in Internet Explorer 9 or lower, hopefully IE 10 will support this feature of CSS3). The text in the two-column layout reads from right to left down the first column and then up to the second column to finish. If the container were to change size (such as in a browser resize) the columns would change width to fit in the new space.

Here is the HTML for the DIV:

<div id="ex1">
  <p>Quis nostrud exercitation consectetur adipisicing elit, sed do eiusmod tempor incididunt. Velit esse cillum dolore ut enim ad minim veniam, ullamco laboris nisi. Ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, sunt in culpa in reprehenderit in voluptate.</p>
  <p>Qui officia deserunt sed do eiusmod tempor incididunt ut enim ad minim veniam. Ut aliquip ex ea commodo consequat. Mollit anim id est laborum. Cupidatat non proident, ullamco laboris nisi. Consectetur adipisicing elit, ullamco laboris nisi ut enim ad minim veniam.</p>
  <p>Eu fugiat nulla pariatur. Qui officia deserunt quis nostrud exercitation excepteur sint occaecat. Duis aute irure dolor velit esse cillum dolore eu fugiat nulla pariatur. Ut enim ad minim veniam, ullamco laboris nisi qui officia deserunt.</p>
  <p>Consectetur adipisicing elit, duis aute irure dolor sunt in culpa. Lorem ipsum dolor sit amet. Sed do eiusmod tempor incididunt duis aute irure dolor ullamco laboris nisi.</p>
  <p>Quis nostrud exercitation cupidatat non proident, ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt excepteur sint occaecat ut aliquip ex ea commodo consequat. Velit esse cillum dolore quis nostrud exercitation consectetur adipisicing elit.</p>
</div>

How to Add Columns with CSS3

It's easy to add columns with CSS3, in two ways. You can define the number of columns you'd like to have in the space or you can define the width of the columns and let the browser decide how many. You can also set both the number and the width, but this doesn't have reliable results.

To set the number of columns you use the column-count property and the -moz- and -webkit- browser extensions. For example, to set a DIV to have two columns, write:

div {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}

Two Columns Example

To change that to three columns, simply change the column-count to 3:

div {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
}

Three Columns Example

When writing CSS3, you should always place the browser extensions first, and the specification property last. This ensures that browsers that use the specification are using that property, because of the CSS cascade.

When setting the number of columns, you let the browser define the width of the columns and it will automatically scale them to fit the width and height of the container. In other words, if the browser is resized and the container gets bigger, the columns will get wider.

To set columns based on the width of the column, write:

div {
  -moz-column-width: 100px;
  -webkit-column-width: 100px;
  column-width: 100px;
}

Set Column Width

This is a more flexible layout because the browser will place the text within as many columns as will fit within the container. If the container gets bigger, the number of columns will increase.

You can also set the number of columns and the width of the columns. This can result in extremely tall columns if there is a lot of text and the columns are not very wide. However, in testing this, I found that most browsers ignored the column-width property and displayed it with two columns in the entire space. See the example.

Changing the Space Between Columns

There are two things you can do to the space between columns: change the width of the space with column-gap and add a line between the columns with column-rule.

The width of the gap between columns will be determined automatically by the browser if you do not specify a width. But you can change that width to make the gaps wider or narrower to fit your typography and design. Here is the CSS to add 30px between each column in a 3-column layout:

div {
  -moz-column-count: 3;
  -moz-column-gap: 30px;
  -webkit-column-count: 3;
  -webkit-column-gap: 30px;
  column-count: 3;
  column-gap: 30px;
}

A Wide Gap

And here is the CSS to change that gap to only 3px:

div {
  -moz-column-count: 3;
  -moz-column-gap: 3px;
  -webkit-column-count: 3;
  -webkit-column-gap: 3px;
  column-count: 3;
  column-gap: 3px;
}

A Narrow Gap

It's a good idea to examine the gap between columns to make sure your text is readable. If the columns are too close together, it can be hard to tell where a column ends. And if they are too far apart, readers won't know to move to the next column.

You can also add lines between the columns. You can define the width, color, and style separately with column-rule-width, column-rule-color, and column-rule-style. Or you can set them all at once with the column-rule shortcut property. Here's how to set a rule between the columns that is 1px wide, black, and solid:

div {
  -moz-column-count: 3;
  -moz-column-gap: 10px;
  -moz-column-rule: 1px solid black;
  -webkit-column-count: 3;
  -webkit-column-gap: 10px;
  -webkit-column-rule: 1px solid black;
  column-count: 3;
  column-gap: 10px;
  column-rule: 1px solid black;
}

Height of Your Columns

The dimensions of your columns will fill the space of the container element. So if you have a DIV that is 300x300 pixels, the columns will fill that space. Except if the text in the element overflows the space. Then the height is given higher priority, and the text will spill out into additional columns. If the text is not enough to fill all the columns, then the last column will only be partially filled.

Here is an example of two columns where the height is too short, so it displays with more columns. And here is an example where the height creates fewer columns.

Span Headlines

The column-span property can be set on any element within the columns to make it span the columns, the same way the colspan attribute works in tables. The drawback is, this isn't supported by any browsers right now. But once it works, you could create a headline that spans all three columns with this HTML:

<div>
<h3>This Headline Should Span all 3 Columns</h3>
  <p>Quis nostrud exercitation consectetur adipisicing elit, sed do eiusmod tempor incididunt. Velit esse cillum dolore ut enim ad minim veniam, ullamco laboris nisi. Ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, sunt in culpa in reprehenderit in voluptate.</p>
  <p>…</p>
</div>

And this CSS:

div {
  -moz-column-count: 3;
  -moz-column-gap: 10px;
  -moz-column-rule: 1px solid black;
  -webkit-column-count: 3;
  -webkit-column-gap: 10px;
  -webkit-column-rule: 1px solid black;
  column-count: 3;
  column-gap: 10px;
  column-rule: 1px solid black;
}
div h3 {
  -moz-column-span: 3;
  -webkit-column-span: 3;
  column-span: 3;
}

You can view this example to see if your browser supports it the column-span property.

CSS3 Multi-Column Browser Support

As with many of the new features of CSS3, multi-column layout is not supported by Internet Explorer, even version 9. However, current versions of Chrome, Firefox, Safari and Opera all handle CSS3 multi-column layout without a problem.

If you need to support browsers that don't have multi-column support, then you should have a fallback option for those browsers. Here is how you can do it with the Modernizr script:

  1. Place the following SCRIPT tag in your HEAD after any other style sheets:
    <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script>
  2. Add another SCRIPT below the above line that reads:
    <script>
    Modernizr.load({
      test: Modernizr.csscolumns,
      yep: 'columns.css',
      nope: 'no-columns.css'
    });
    </script>
  3. Create a CSS style sheet that includes your multi-columns CSS and save it as columns.css in the same directory.
  4. Create a CSS style sheet that contains your fallback CSS (such as columns with float) and save it as no-columns.css in the same directory.
  5. Test your page in IE and Chrome, Safari, or Opera.
  1. About.com
  2. Computing
  3. Web Design / HTML
  4. Cascading Style Sheets
  5. CSS3
  6. CSS3 Tutorials
  7. CSS3 Columns - Multi-column Layout with CSS3

©2014 About.com. All rights reserved.