Multi-Column CSS

If you have a long list of words laid out on a page (see list below), it might be better to place them in a multi-column page format. CSS3 makes this entirely possible without using tables or multiple divs. All we need is a single div for the entire list. In this example, we will work with a list of animals. We will use a div class called “animals.”

To use multi-columns, we simply style the div with:

.animals {-moz-column-count:3; -webkit-column-count:3; column-count:3;}

Multi-column divs is supported on Firefox, Safari, Chrome and IE browsers.

Multi-Column Example

Just change the numbers to make multiple columns.