• Skip to main content

Uly.me

cloud engineer

  • Home
  • About
  • Archives

Multi-Column CSS

January 22, 2014

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;}

.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

Just change the numbers to make multiple columns.

Filed Under: CSS, HTML Tagged With: columns, multiple

Search This Website

Subscribe Via Email

  • Home
  • About
  • Archives

Copyright © 2023