Creating a multiple columns layout, also known as the “newspaper layout”, has been implemented by web developers for quite some time now. However, this has often resulted in the use of flaky techniques and floats.
Using these techniques generally results in a very time-consuming process. Fortunately, CSS3 provides a multi-column layout module that offers more flexibility and control over previous techniques and methods.
Browser Support
Before you start to implement this module, you should be aware that there is limited browser support at this time. Internet Explorer 10+, as well as Firefox, Chrome, Safari, and Opera, support this module.
However, while Internet Explorer 10 and Opera provide native support, Firefox, Chrome, and Safari require their vendor prefixes at this time. Previous versions of Internet Explorer do not provide any support for this module.
Multiple Columns Properties
You should at the very least, specify the number of columns, or the width of your columns, within a multi-column element. However, there are additional properties we will cover that are part of this module.
Creating Columns
You can use the shorthand column property to specify the number of columns and/or the width of the columns. Alternatively, you should use the column-count and column-width properties as described below.
The column property accepts one or two values. If you supply two values, one of the values should be set to auto. Auto is the default value for count and width.