The World Wide Web consortium’s (W3C) CSS working group recently released a draft of a new multi column layout module--to be included (with possible modifications) into the CSS 3 specs. For those web developers that have been lamenting the lack of adequate multi column support in current supported versions of the CSS specs, this is an exciting and welcome addition.
In this article I will identify the basic principles of the Multi-Column model as described by the W3C, and give some examples of how it might be used to layout web pages much more easily than is possible today.
Currently, all content within a content box flows left to right, and then top to bottom, filling the entire content box (minus padding). Multi Column Layout uses a new type of model for the positioning and flow of content within a content box.
The use of the column-box (or column for short) will specifiy that content within a content-box flow in a columnar fashion. Just like table cells in an HTML table. Columns in a content-box will flow from left to right. The content within each column flows in the normal top to bottom direction. From the W3C paper:
Content is flowed into column boxes in the block-progression-direction, and column boxes (or "columns", for short) are flowed into content boxes in the inline-progression-direction.
The implications for web developers coding in CSS are tremendous. The only way to create multiple columns in CSS now is by jumping through hoops. A simple two column layout requires breaking a content-box into two child boxes and floating them. Try adding another column and you’ll find it almost a nightmare to code it with enough hacks so that every major browser renders it to a reasonable degree of similarity. I have yet to see a fluid four column layout using current CSS box model techniques.
The Working draft offers promise that we can look forward to bieng able to code much more sophisticated web page layouts that are standards compliant,cross browser compatible, and flexible enough to render properly on many different types of devices.
The datails: Multi Column Layout using the ‘column’ property
Multi-column layout will be easy to create in CSS3. Simply use the ‘column’ declaration on the appropriate content-box.
The Column-Count property
To specify the number of columns you want your parent content-box to be split into, simply use the ‘column-count’ property
body { column-count: 2 }
The Column-Width property
You can also specify the width of the columns by using the ‘column-width’ property. If you don’t set the column count explicitly, the number of columns will be determined by the column width and the avaiable space within the parent content-box.
body { column-width: 15em }
The Columns shorthand
Use The shorthand ‘columns’ property to affect both the column width and the number of columns.
body { columns: 2 15em }
The Column-Rule and Column-Gap Properties
Use the column rule property to define the style of the rules that separate columns. It is similar to the border property, and therefore takes similar values.
Use the Column-Gap property to define the width of the gutter in between columns.
body {
column-gap: 1em;
column-rule: thin solid black;
}
The ‘column-break-before’, ‘column-break-after’ and ‘column-break-inside’ properties
Use these properties to tell the browser where to break the content within columns. In other words, the browser needs to know there to move content into a new column. These properties specify when and where to move content to a the next xolumn over.
h1 { column-break-before: always }
h2 { column-break-after: avoid }
h1, h2 { column-break-inside: avoid }
Multi Column Layouts applied
Using the properties described above, we can quickly layout a page that uses a fluid four column grid in which each column resizes with the width of the browser window--something that is impossible using current CSS techniques. The code below will do the trick…
Create a content-box:
<div></div>
give it an identifier:
<div id=”mainContent”></div>
Now insert your content:
<div id=”mainContent”> Lorem ipsum dolar sit amet, cons incidunt ut labore et dolore magn trud exercitation ullamcorpor susc vel eum irure dolor in reprehende dolore eu fugiat nulla pariatur…</div>
Create a style sheet and style “mainContent” like so…
#mainContent {
width: 100%;
column-count: 4;
column-gutter: 15px;
column-rule: solid black thin;
}
and voila…
Content within “mainContent” flows from one column to the next. And since the number of columns is explicitly stated and the column width has been set to auto (by default), the columns resize so that no matter what the window dimensions are, there will be 4 of them…
For those of you not familiar with it, a Use Case Diagram describes the needed functionality in a system. Unlike flow diagrams, however, the use case diagram doesn’t represent the order or number of times the functionality needs to be executed and it doesn’t display any subroutines. Instead, it’s a high level diagram that identifies the primary tasks an actor/persona needs to be able to do.
