Dividing long list of tags into columns?

Question

I\'ve got a list of about 30

in a

. Is there any way, using CSS, to divide these into three columns of ten?

Answer 1

The following is tailored to be mobile friendly.

div.a {
  background-color: #ffffff;
  border: 2px solid;
  margin: 0;
  overflow: auto;
  padding: 1%;
  text-align: left;
  word-wrap: break-word;
}
ul.a {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li.spacea {
  float: left;
  width: 2%;
}
li.thirda {
  color: #ff00ff;
  float: left;
  width: 32%;
}
li.thirdb {
  color: #ffff00;
  float: left;
  width: 32%;
}
li.thirdc {
  color: #00ffff;
  float: left;
  width: 32%;
}

<div class="a">
  <ul class="a">
    <li class="thirda">
      The quick brown fox jumped over the lazy dog.
    </li>
    <li class="spacea">
      &nbsp;
    </li>
    <li class="thirdb">
      The quick brown fox jumped over the lazy dog.
    </li>
    <li class="spacea">
      &nbsp;
    </li>
    <li class="thirdc">
      The quick brown fox jumped over the lazy dog.
    </li>
  </ul>
</div>

Answer 2

I usually set the widths at 28% and float the to the left:

ul li {
   width: 28%;
   margin: .5em 2%;
   float:left;
}

The downside to this is that items fill like:

- - -
- - -
-

Not like:

- - -
- -
- -

If you want vertical filled columns, you need 3 <ul>s.

Answer 3

In CSS3 this is possible.

#columns {
  -moz-column-count: 3;
  -moz-column-gap: 20px;
  -webkit-column-count: 3;
  -webkit-column-gap: 20px;
  column-count: 3;
  column-gap: 20px;
}

HTML:

<div id="columns">
  <ul>
... lots of lis ...
  </ul>
</div>

The list items will spill over into the next column as they exceed the height of the container.

Perhaps for older browser you could use JavaScript, as this seems to be more aesthetic than a critical feature.