CSS3 offers a new way to arrange text content using the Multi-column CSS3 module. This CSS3 feature will help you fit your text into columns without extra markup like
div floats or extra
Short browser history and support
The draft was published a decade ago - in 2001, but only in April 2005, with the release of the Firefox 1.5 beta (based on Gecko 1.8), parts of the CSS3 Multi-Column module were supported.
Multi-column module is currently supported only in Mozilla and Webkit browsers (Safari and Chrome), this means that there’s no support for browsers like IE and Opera. But that should be just OK as long we are aware and understand the progressive enhancement.
W3C says that:
…style sheets can declare that the content of an element is to be laid out in multiple columns
OK, so how to use it?
As you read above, being supported only by Mozilla and Webkit-based browsers, means that vendor prefixes like
-webkit- must be used in production.
The CSS3 module properties
- column-count - the desired number of columns for the element.
- column-width - the width of each column.
- column-gap - the padding between columns.
- column-rule - to specify a border between columns as a divider.
Enough with the theory, let’s see some action!
There are two ways to define columns:
column-count- how many columns do you need
column-width- how wide should each column be
Alternatively, you may use the shorthand
Either you choose
column-width to define you columns, to add a border between them append the following CSS declarations:
These are the most interesting Multi-column CSS3 module properties but if you want to find out more, please visit the W3C specifications for other details.
Below you have an example that shows you how to arrange a paragraph into columns, enjoy the demo and please let me know your thoughts about it!
Happy Holidays with CSS3
HTML5 canvas awesomeness - games roundup