CSS3 Multi-Column Module

The W3C multi-column module is a CSS level-three working draft, proposed by the W3C to extend the current CSS box model. The module’s intent is to allow content to flow into multiple columns inside an element. It offers new CSS properties that let the designers specify in how many columns an element should be rendered. The browser takes care of formatting the text so that the columns are balanced.

A typical Multi-Column structure with CSS3 can be designed with the following code:


div.myTable{
width:600px;
column-count:3;
column-width:200px;
}
div.myTable h1{column-span:all;}

The proposed new CSS properties are:

  • ‘column-count’, to determine the number of columns into which the content of the element will flow.
  • ‘column-width’, to describe the optimal width of each column.
  • ‘column-gap’, to set the padding between columns.
  • ‘column-rule’, to define a border between columns.

…and HTML code is:

<div class=mytable>
<h1>Column headline</h1>
<p> … First column: some content here… </p>
<p> … Second column: some content here… </p>
<p> … Third column: some content here… </p>
</div>

How you can see, it’s really more clear and less “expensive” than using <table> tag or a pseudo-table designed with CSS2.

Got a question or need help and  have a comment or suggestion instead, post it in the comments section below.

You may also like...