Divide list into two columns

Question

I'm trying to build an unordered list something like this:

 - Item 1     |    - Item 4
 - Item 2     |    - Item 5
 - Item 3     |    - Item 6

I have this HTML:

 <div class="multi-column">
    <ul>
       <li>Item 1</li>
       <li>Item 2</li>
       <li>Item 3</li>
       <li>Item 4</li>
       <li>Item 5</li>
       <li>Item 6</li>
    </ul>
 </div>

and this CSS:

.multi-column {
   -moz-column-count: 2;
   -moz-column-gap: 20px;
   -moz-column-fill: auto;
   -webkit-column-count: 2;
   -webkit-column-gap: 20px;
   -webkit-column-fill: auto;
   column-count: 2;
   column-gap: 20px;
   column-fill: auto;
}

It builds the two columns as it's supposed to, but it puts 4 items in the left side and 2 in the right side (4x2). What I wanted is 3 x 3.

I also tried to use the balance value in the column-fill property, but it didn't work.

What am I missing here?

I defined the height property and it worked. I's just me being stupid sometimes... but it would be great if we could define how many item should appear in each column. Thanks anyway ;) — José Pinto, Mar 22 '16 at 16:33
to solve your issue you can use `#multi-column li:nth-child(odd) { float:rihgt }` and `#multi-column li { float:left }` and `border-left/right` — root_milka, Mar 22 '16 at 16:35

score 5 · Answer 1 · edited Mar 28 '16 at 14:17

5

Give the multi-column class to the ul element instead of div and it will divide the li elements in the <ul> element into two columns.

<ul class="multi-column">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
</ul>

and add list-style-position: inside; to the css of .multi-column class.

Here is the link of the solution: https://jsfiddle.net/573mtbv5/

edited Mar 28 '16 at 14:17

Mr Lister

42,557
14
95
136

answered Mar 22 '16 at 16:33

Kaan Burak Sener

934
10
19

Worked in IE10+, Edge, Chrome but not in FF. – Fabio Belz Jul 08 '17 at 23:37

score 0 · Answer 2 · answered Mar 22 '16 at 16:36

0

The class multi column needs to be added to the ul, also you need to add the style below if you want to keep the bullets in both columns.

list-style-position: inside;

http://plnkr.co/edit/csfU5Xd0IaU8U9VKg5nS?p=preview

answered Mar 22 '16 at 16:36

KieranDotCo

458
2
16

1

@HunterTurner - ***CSS Counter Styles*** are not very well supported (as listed on the page you cited) ... `list-style-position` is from CSS 2.1 and is supported by everything since IE 6, FF 2, Chrome 1, and my dog. http://caniuse.com/#search=list-style-position – Stephen P Mar 22 '16 at 17:44

score -1 · Answer 3 · edited May 23 '17 at 12:31

That is to correct code. By itself it works fine. Do you have any other code around that? You have included all the CSS for all browsers so I think there is something else going on that is making it not render correctly.

There is another answer at: Is there a way to break a list into columns?

That basically does the same thing. If you only have one column you can't dictate how many items will show because they all will.

So I think the way you did it is the best way.

Divide list into two columns

3 Answers3

Linked