CSS3 Multi-Columns

CSS3 - Webkit - Multi Column Layout

[ NOTE: All examples are shown for Webkit. This will work for Safari (ipad/iphone) and Chrome (android) and Amazon Silk (kindle). You can replace -webkit- with the -moz- prefix for Firefox. ]

The CSS3 MultiColumn feature lets you specify the number of columns, or the size of the columns, and the browser will calculate how to layout the text to fit the columns.

For newspaper or magazine layouts, multicolumns are like having a desktop publishing application for the web.

The browser will distribute the content to fit over a specific number of columns or a specific column size. It will break the text at the best place to continue the text in the next column.

In addition to text, images can be embedded in the content and they will be arranged in the columns.

Column Width Method

The Column Width Method states a specific width for the columns. Using this width, the browser will calculate how many columns can fit in the container.

.sample {
  -webkit-column-width: 150px;
}

This css selector defines columns that are 150px wide.

We will put the columns inside a container so we can see what is happening to the columns.

#columnBox {
 background: #ffffee;
 width: 500px; 
 color: #000084;
 padding: 10px;
 border: 2px solid black;
}

.sample {
  -webkit-column-width: 150px;
}

This sample CSS has a #columnBox id that is defined that as 500px wide.

The .sample class defines the column width as 150px.

So the browser will calculate how many 150px wide columns are needed to fill the containing columnBox which is 500px wide.

Cum odio cras. Pid habitasse elit? Etiam turpis, porttitor enim! Auctor lacus, nunc porttitor mattis magna elementum dapibus. Natoque cum et! Lectus a placerat, hac cum ridiculus ultrices purus porta, tristique mattis, vel vel phasellus pulvinar, nisi in nec nunc? Penatibus in! Urna nisi, odio purus magna turpis? Augue scelerisque integer porta ut ultrices ultrices, ac turpis turpis egestas a sit pulvinar cras mattis duis mattis facilisis dignissim! Scelerisque dictumst, sit risus! Sit cum nascetur parturient? Augue augue aliquet, rhoncus dictumst et integer! Nec. Ultricies odio. Elementum! Vut sociis tristique enim elit eu ultricies enim! Nunc pellentesque? Facilisis, nec! Vel magnis penatibus mid, porttitor lundium tempor mauris et facilisis, tincidunt egestas eu rhoncus! Magna amet, sit in, ut augue nec cras placerat. Integer habitasse magna facilisis natoque dignissim! Nunc phasellus sociis, eu auctor pellentesque, magna ut cras diam cursus auctor lacus, magna et. Integer lacus in tempor, tempor eu sit, lundium! Sociis, cursus et pulvinar, montes porttitor placerat dictumst enim elementum, ac porta pulvinar tortor nec tincidunt cras dictumst ut aenean integer, mus tortor integer sit? Egestas dis mauris et pid nunc velit natoque lorem eros aenean, magnis montes! Porta nec odio, magna in magnis et, ultricies, a dapibus placerat mattis pulvinar? In.

Three columns of 150px will fit in a 500px wide container. This allows room for the space between the columns.

The browser adapts by increasing the height of the container.

The browser will try to arrange the text as close as possible to fit in the container size within the container.

If the container has enough free space available, a new column will be created. When the browser realizes the ideal number of columns, the text will be evenly distributed.

Here is the same mark-up with a smaller amount of text:

In this example, there are still three columns, but the height is much smaller. The browser has automatically made these adjustments.

Now we will change the CSS for #columnBox to a width of 800px.

Five columns will fit in the 800px container. But in this example, we have four columns and they are wider. What happened to the column-width?

The browser will treat the column-width as a minimum width if needed to format the columns.

But what if we still want 5 columns? -- See page 2

1 | 2 | 3 | 4 | Next Page