Cascading Style Sheets/Multi-Column Layout

Multiple Column Layout Multiple Column Layout is a new feature in CSS3 that will mostly render obsolete the need to set up fancy column partitioning with divs and tables. It is currently supported as experimental modules within WebKit and Gecko based browsers. There are 5 properties relating to multi-column layout: column-count: int; column-width: width; column-gap: width; column-rule: thickness type color; column-span: 1 or all. Standard WebKit Gecko column-count -webkit-column-count -moz-column-count column-width -webkit-column-width -moz-column-width column-gap -webkit-column-gap -moz-column-gap column-rule -webkit-column-rule -moz-column-rule Here is the classic lorem ipsum text in 3 columns: div { column-count: 3; -webkit-column-count: 3; -moz-column-count: 3; text-indent: 2em; } Lorem ipsum 3 2 columns with a dashed separator: div { column-count: 2; -webkit-column-count: 2; -moz-column-count: 2; column-rule: 1px dashed; -webkit-column-rule: 1px dashed; -moz-column-rule: 1px dashed; text-indent: 2em; } Lorem ipsum 3 5 columns with a dotted separator: div { column-count: 5; -webkit-column-count: 5; -moz-column-count: 5; column-rule: 1px dotted; -webkit-column-rule: 1px dotted; -moz-column-rule: 1px dotted; text-indent: 2em; } Lorem ipsum 3 This version ignores column count in favor of specifying the width of a column and the height of the text area, allowing it to grow horizontally. div { -webkit-column-width: 150px; -moz-column-width: 150px; column-width: 150px; -webkit-column-rule: 1px dotted; -moz-column-rule: 1px dotted; column-rule: 1px dotted; height: 350px; text-indent: 2em; } Lorem ipsum 3 The column-span property allows for items like images and headers to span multiple columns instead of being confined to one. div { -webkit-column-width: 150px; -moz-column-width: 150px; column-width: 150px; -webkit-column-rule: 1px dotted; -moz-column-rule: 1px dotted; column-rule: 1px dotted; height: 350px; text-indent: 2em; } div h3 { -webkit-column-span: all; -moz-column-span: all; column-span: all; } Lorem ipsum 3