CODEWITHSUNDEEP
css
FffD
FffD

Reputation: 67

Two column list with specific overflow

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!

Upvotes: 0

Views: 74

Answers (1)

Marcos Pérez Gude
Marcos Pérez Gude

Reputation: 22158

Just use column-fill: auto:

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

Next time you ask some question, share your code.

Upvotes: 1

Related Questions