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.”
aardvark beetle camel dog elephant fox goat hen iguana jackal kangaroo lion
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
aardvark
beetle
camel
dog
elephant
fox
goat
hen
iguana
jackal
kangaroo
lion
beetle
camel
dog
elephant
fox
goat
hen
iguana
jackal
kangaroo
lion
Just change the numbers to make multiple columns.