CSS3 Multi-Column Module is a vital feature present in CSS3. This feature enables users to flow the content of an element into multiple columns. The main benefit of this multi-column layout is the improved readability of pages. Long lines of text are difficult to read, breaking the line up into two or more columns (as is done in news papers) greatly improves the readability.
Currently only Safari and Firefox support this feature.

column-count: 2;
column-width: 150px;
column-gap: 15px;
column-rule: 1px solid #CCCCCC;
  • column-count : Is the number of columns into which the content of the element will flow.
  • column-width: Is the optimal width of each column.
  • column-gap: Will set the padding between the columns.
  • column-rule: Defines a border between the columns.

You'll need to add -moz- or -webkit- to the properties for them to work in Firefox and Safari.

Example - Text without Multi-Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla interdum viverra diam. Donec dolor erat, dignissim id, elementum a, adipiscing et, lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus at ligula eu dui facilisis tincidunt. Morbi lacus nibh, cursus vel, rutrum id, dictum id, pede. Fusce commodo purus vitae diam luctus venenatis. Duis a nisi eu nulla vulputate pharetra. Donec vulputate sagittis justo. Proin laoreet. Sed dignissim elementum pede. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam scelerisque diam non ligula. Aenean interdum accumsan mi. Vestibulum at justo ac turpis mollis dictum. Proin consequat bibendum turpis. Vivamus felis mi, lobortis in, porttitor nec, hendrerit a, libero.

Example - With Multi-Column

-moz-column-count: 2;
-moz-column-gap: 15px;
-webkit-column-count: 2;
-webkit-column-gap: 15px;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla interdum viverra diam. Donec dolor erat, dignissim id, elementum a, adipiscing et, lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus at ligula eu dui facilisis tincidunt. Morbi lacus nibh, cursus vel, rutrum id, dictum id, pede. Fusce commodo purus vitae diam luctus venenatis. Duis a nisi eu nulla vulputate pharetra. Donec vulputate sagittis justo. Proin laoreet. Sed dignissim elementum pede. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam scelerisque diam non ligula. Aenean interdum accumsan mi. Vestibulum at justo ac turpis mollis dictum. Proin consequat bibendum turpis. Vivamus felis mi, lobortis in, porttitor nec, hendrerit a, libero.

Example - With Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla interdum viverra diam. Donec dolor erat, dignissim id, elementum a, adipiscing et, lorem. Class aptent taciti sociosqu ad CSS3 Examplelitora torquent per conubia nostra, per inceptos himenaeos. Phasellus at ligula eu dui facilisis tincidunt. Morbi lacus nibh, cursus vel, rutrum id, dictum id, pede. Fusce commodo purus vitae diam luctus venenatis. Duis a nisi eu nulla vulputate pharetra. Donec vulputate sagittis justo. Proin laoreet. Sed dignissim elementum pede. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam scelerisque diam non ligula. Aenean interdum accumsan mi. Vestibulum at justo ac turpis mollis dictum. Proin consequat bibendum turpis. Vivamus felis mi, lobortis in, porttitor nec, hendrerit a, libero.