0

How would you create a simple html/css page that can display 2 columns with a list of items so that the first column fills up first and then flows into second column, i.e. NOT balanced column height.

For example:

------------------
1. John  
2. Alan  
3. Matt  

------------------
1. John  5. Suzie
2. Alan  
3. Matt  
4. Phil  
------------------
1. John  5. Suzie
2. Alan  6. Cathy
3. Matt  7. Bob
4. Phil  8. Richard
------------------

I've tried a div with a column-count: 2; but for example with 4 items it will separate them in 2 items in each column, where I would like all 4 in the first column.

Thanks!

FffD
  • 67
  • 3
  • here is a tutorial: http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/ also have a look here: http://stackoverflow.com/a/6509239/1582089 – Cassian Dec 02 '15 at 14:38

1 Answers1

1

Just use column-fill: auto:

-moz-column-fill: auto;
     column-fill: auto;

Next time you ask some question, share your code.

Marcos Pérez Gude
  • 20,206
  • 4
  • 34
  • 65
  • You have to set a `height` though, so this only works when the list items have a fixed (known) height – Kerstomaat Dec 02 '15 at 14:34
  • OP doesn't share the code, so I can't know how many pixels of height he needs. Imagine that each line is 20px height, this columnset needs `height : 80px;` and it fills like OP needs automatically – Marcos Pérez Gude Dec 02 '15 at 14:37
  • Thanks, this worked perfect with @SimonPlus comment. I'll remember to share code next time I have a question! – FffD Dec 03 '15 at 14:47