CSS – Single list with dynamic column wrapping

Question

Possible Duplicate:
CSS: Ways to break list into columns on page?

I was looking for this solution and couldn't find it so I thought I would post what I ended up making.

I was trying to build a single list where after the 5th item the list would wrap and move into another column. This is so it can be super dynamic with how many items the user needs.

enter image description here

Here is the solution I came up with.

 li{
   position: relative;
   line-height: -6px;
}
    
 ol li:nth-child(6) {
    margin-top: -90px;
}
    
 ol li:nth-child(-n+5){
    margin-left: 0em;
 }
    
 ol li:nth-child(n+6){
   margin-left: 10em;
 }

 <ol>
      <li>Aloe</li>
      <li>Bergamot</li>
      <li>Calendula</li>
      <li>Damiana</li>
      <li>Elderflower</li>
      <li>Feverfew</li>
      <li>Ginger</li>
      <li>Hops</li>
      <li>Iris</li>
      <li>Juniper</li>
 </ol>

Here's the Fiddle: http://jsfiddle.net/im_benton/tHjeJ/

What do you think of my solution?? What is a solution that will work in IE?

Have you checked this question http://stackoverflow.com/questions/6509106/css-ways-to-break-list-into-columns-on-page ? — tuff, Oct 19 '12 at 17:32

score 26 · Accepted Answer · answered Oct 19 '12 at 19:17

26

Try using the following as @tuff suggested.

ol {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
}

http://jsfiddle.net/tHjeJ/6/

answered Oct 19 '12 at 19:17

zmanc

4,551
12
41
82

4

Support isn't great: http://caniuse.com/#feat=multicolumn – Thomas Feb 10 '15 at 10:00
support is good, but currently Chrome is full of quirks and bugs. – vsync Sep 12 '16 at 11:43

Boris D. Teoharov · Answer 2 · 2012-10-20T16:41:04.880

0

Its not that hard if you just want two columns You could try something like this on your list:

ol{ width:300px;}

li{
  width:50%;  
  float:left;
}

It would actually wrap equal number of list items in each column if li number divides by column number.

If you want numeration to be like on your picture you could use wrapping divs for each column and then use the start attribute on your list ...it will be something like start="6"

edited Oct 20 '12 at 16:41

answered Oct 19 '12 at 19:31

Boris D. Teoharov

1,987
2
27
48

3

This only works if you don't care about list order. I only want the list to move to a new column if there is more than 5 items. – im_benton Oct 20 '12 at 15:22
Read after the bolded text...use the ol start attribute. Doesnt this help you? – Boris D. Teoharov Oct 20 '12 at 16:42
1

Thanks for your help but I was looking for a way to do it without declaring a new div or ul. Turned out I had to just do it in the php logic which is probably a better solution at the end of the day. – im_benton Oct 20 '12 at 19:58
yep, doing it in php would be easier and more browser compatible – Boris D. Teoharov Oct 20 '12 at 21:08
@BorisD.Teoharov "Browser compatible", I don't equate these things, your not asking the browser to do anything compatibility related at all if you do all the work layout _for_ it on your backend. – ThorSummoner Apr 05 '15 at 20:48
The simpler html and css are, the more likely it is for any browser to render them properly, i.e. more browsers will be compatible with your layout. Is this clear enough now? – Boris D. Teoharov Apr 06 '15 at 16:40

CSS – Single list with dynamic column wrapping

2 Answers2