While printed newspapers are giving in to electronic versions, the column is alive and well online. CSS Multicolumn layout enables you to create attractive text layouts in a number of variations. This sample shows how to create a fixed or variable number of columns, controlling column breaks, and more.
The Fixed number of columns example shows how to create a page with a set number of columns of text. As the browser window is resized, the columns change width and reflow the text to keep the same layout.
The Flexible column count example lets you create webpages where the number and size of the columns change with the size of the window. In this example, when the browser window is made smaller, the colums get narrower. As the window's size reduces, rather than making narrower columns, columns are removed, and the text reflowed to the remaining columns. The text is fully justified and hyphenated across each column, and columns are separated by a column length gap and decorative rule.
The Column breaks example shows how to control how a column breaks when a window is resized. The example has three columns. As the window resizes, one column will get narrower and finally break and create a second column to flow the text to. Another column however doesn't break, instead requiring the page to be scrolled to see the complete text. This type of layout can help when displaying source code or math formulas where breaking arbitrarily would make reading more difficult.
The Column span example shows how to use CSS rules to make columns that span several other columns. This can let you create a webpage for example where an article title spans the columns that contain the story. As the page is resized, the number of columns in the story change, but the title continues to span across all of them.
The Column fill example shows how to balance how text is distributed across multiple columns. In one view, the text is laid out sequentially, where the text flows to the bottom of the column and then into the next column. In the other view, the text flows to a certain height in the column, and then flows to the next. All the columns text in the second view are approximately the same height.
Reference
CSS Multi-column Layout
Conceptual
Internet Explorer 10 Developer Guide: CSS Multi-column layout
Internet Explorer Test Drive
Tweet Columns
Internet Explorer Testing Center
CSS Multi-column
The Internet Explorer Samples Gallery contains a variety of code samples that demonstrate new features available in Internet Explorer. These downloadable samples are provided as compressed ZIP files that contain the HTML, JavaScript, CSS, and image resources for the sample, along with the license agreement and sample description metadata. After you’ve downloaded and unzipped the compressed files, the sample files can be found in the following location:
(unzipped folder)\HTML,JavaScript\Website \(Sample)
This sample is provided as-is in order to indicate or demonstrate the functionality of the feature APIs for Internet Explorer 10. We appreciate your comments and questions on this sample!
For download info, visit Internet Explorer downloads.