Question

I have a link list like that:

<div id="linklist">
  <a href="link.html">Dummy link text</a>
  <a href="link.html">Dummy link text</a>
  <a href="link.html">Dummy link text</a>
  <a href="link.html">Dummy link text</a>
  <a href="link.html">Dummy link text</a>
  <a href="link.html">Dummy link text</a>
</div>

Now I want to have them in 3 columns with (in this example) 2 links per column.
I know that there is a CSS3 property column-count and such others but somehow the links are in one single row. (I’ll add the -webkit- prefix if needed later.)

CSS:

#linklist a {
    display: inline-block;
    margin: 3px;
    padding: 4px;
    -moz-column-count: 2;
}

Answer 1

Something like this jsFiddle?

#linklist {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-gap: 2em;
     -moz-column-gap: 2em;
          column-gap: 2em;  
}
#linklist a {
   display: block;
} 

TheCSS column-* properties you have at your disposal are: column-width, column-count, column-gap, column-rule, column-rule-width, column-rule-style, column-rule-color, column-span, column-fill, columns. Source: MDN.