HTML and CSS Reference
In-Depth Information
Multiple Columns
•
Demo
• Browser support: Opera 11.1+, Firefox 2+, Chrome 4+, Safari 3.1+, IE 10+
Multiple columns are now available in most browsers (including IE10!), which
makes them pretty much ready to use on production websites. You can
render the content of any element into multiple columns simply by using
column-width: <length unit>
or
column-count: <number>
. As
with paged content, you can use
break-before
,
break-after
or
break-inside
to control how the content displays within each column.
You can also make one of the child elements span the whole set of columns
by using
column-span: all
. Here is how that would look:
