0

My goal was to make a list dynamically list itself into two columns, no matter the length of the list. I would really like to hear from people who know more about JavaScript and jQuery than I do if this code looks good or if there is a better or more concise method for implementing this sort of thing.

Thanks!

http://jsfiddle.net/mkimitch/ZEL5x/12/

Mark Kimitch
  • 322
  • 3
  • 9

2 Answers2

2

Why not just float them? 

li {
  line-height: 1.2em;
  position: relative;
  float: left;
  width: 50%;
}

No javascript needed. unless I'm missing something...

ori
  • 7,817
  • 1
  • 27
  • 31
  • 1
    Unless I'm missing something regarding the special properties of `ul` tags with floated `li` nodes, be sure to slap on a good `clearfix` on the container element as well. http://stackoverflow.com/a/1633170/304588 – Richard Neil Ilagan Jan 20 '12 at 19:17
  • Floated `li` nodes will produce columns that look like this: `1 2` `3 4` `5 6` Whereas I was trying to get it to display like this: `1 4` `2 5` `3 6` – Mark Kimitch Jan 20 '12 at 19:21
1

I suggest not to use javascript for that. You can do this with pure css.

If a user has disabled javascript, your code will not run.

Sample

ul.twocolumn {
width: 400px;
}

ul.twocolumn li {
width: 190px;
float: left;
}

Updated jsFiddle

dknaack
  • 60,192
  • 27
  • 155
  • 202
  • Yes, but you see how the columns are no longer in alphabetical order, at least vertically? That was what I was trying to achieve. If JavaScript is disabled, it displays as just a simple list, nothing really breaks. – Mark Kimitch Jan 20 '12 at 19:28