CSS3 Multi-column Layout

Finally, you can use CSS Multi-column layout to arrange content into multiple columns on the page. This approach is used by newspapers and magazines in the print world, which makes text easier to read and track from line to line by organizing the content into multiple parallel columns.

Multi-column layout allows you to do that with a few lines of CSS. For example, the content in the image below can be quickly organized into 3 columns by placing the line “column-count:3” on the containing div.

Lorem ipsum...

#beagleContent { column-count: 3; }

Multi-column layout offers a wide variety of options to specify how your content is laid out, including the ability to set a fixed column count, a minimum column width, the size of the gap between columns, and even column rules, which are decorative borders between columns. Multi-column layout also provides the ability to specify where column breaks should occur, and to have content automatically balanced between columns, so all columns are the same length. Also, note that because Multi-column is a W3C Candidate Recommendation, no -ms- tag is needed when using these properties. You can try an example of CSS3 multi-column layout using the IE10 platform preview and other browsers.