List fixed number of items alphabetically in multiple columns

Question

I have a list of items that I want to display evenly in alphabetic order (from top top to bottom) in three columns. Is it possible to manage this with css only?

With the example code below the three columns would contain following amount of items: 3/3/2.

<div class="content">
  <div class="list_container">
    <div class="list_item">Adis Abeba</div>
    <div class="list_item">Amsterdam</div>
    <div class="list_item">Beijing</div>
    <div class="list_item">Buenos Aires</div>
    <div class="list_item">Johannesburg</div>
    <div class="list_item">Mexico City</div>
    <div class="list_item">Paris</div>
    <div class="list_item">Stockholm</div>
  </div>
</div>

Demo: http://jsfiddle.net/BERSp/1/

possible duplicate of [CSS: Ways to break list into columns on page?](http://stackoverflow.com/questions/6509106/css-ways-to-break-list-into-columns-on-page) — technophobia, Jul 12 '13 at 16:34
No, the important part in the question concerns retaining the alphabetical sorting. — Fellow Stranger, Jul 12 '13 at 18:30
FYI: The sorting won't change and the solution is identical to the one you accepted below. — technophobia, Jul 15 '13 at 19:20

score 7 · Accepted Answer · answered Jul 12 '13 at 16:34

7

You need column-count or mansonry javascript: http://jsfiddle.net/BERSp/2/

.content {
    width: 500px;
    border:1px solid #111;
    padding: 10px;
}
.list_container {
    overflow:hidden;
    -webkit-column-count:3;
    -moz-column-count:3;
    -o-column-count:3;
    column-count:3;
}

Javascript usefull : http://masonry.desandro.com/

answered Jul 12 '13 at 16:34

G-Cyrillus

101,410
14
105
129

Easy as column-count wow! I couldn't find a solution with grid, flex box and ran my own javascript. Brilliant @G-Cryillus – Brad Vanderbush Apr 13 '22 at 16:24

score 1 · Answer 2 · answered Jul 12 '13 at 16:12

1

For the 3 columns, just set width to 33%:

.list_item {float:left; display: block;width:33%}

answered Jul 12 '13 at 16:12

javitube

91
1
2

1

that doesn't achieve what he wants. he wants them ordered in the columns top to bottom, then left to right – TimCodes.NET Jul 12 '13 at 16:21
Ok ok, I missunderstood, sorry – javitube Jul 12 '13 at 17:09

List fixed number of items alphabetically in multiple columns

2 Answers2

Related