71 Several things about the above solution.

First, there’s no requirement of balance. That is, you can have arbitrary numbers of “elements” in each column.

Second, since this is for demonstration purposes only, and since IE doesn’t understand complex selectors, it uses simple class names to set off the alternate column. It would probably be more helpful to distinguish them more descriptively.

Lastly, IE screws up the numbering of ordered lists (1, 2, 3…) once you’ve removed a particular list item from the document flow (either by floating or absolute positioning). So you can’t rely on that.

posted at 11:55 am on February 22, 2005 by Mike

72 Reason for two lists

Suppose I want to create two ordered lists, side by side, about President Bush.

The first list is titled “The Good” and contains 2 items. The second list is titled “The Bad” and contains 44 items.

You are not going to be able to do this, in order, with your single list solutions.

Just because Nandini used an UL instead of an OL does not mean that some people are not interested in the 2 list solution.

I have been looking for a way to do this on my own web site for a while now. I had it working perfectly with absolute positioning…until my brother increased the font size on his computer and my text went flying out of the absolutely positioned div.

Using relative positioning and flow trickery allows people to use larger text while viewing my site and it still looks like I intended it to.

Thanks to Nandini and others who posted acceptable solutions to this issue. Thanks to those who posted solutions to the wrong issue (the “this is one list” issue). Some of those posts were very informative, as I use both OL’s and UL’s split into columns.

posted at 04:47 pm on February 22, 2005 by Kody

73 kody, probably still one list

Kody – Your example of “The Good” and “The Bad” might still be considered a single list with two different headings. This is understood as “a list of Bush’s traits.” The more I think about it, the more I disagree that they are two distinct lists.

You can achieve a list with multiple headings fairly simply using a dl/dt/dd (which per the specs is not limited solely to definitions).

Nevertheless, the problem described in the main article is definitely a single list problem. As the example illustrates by saying things like “item 1” through “item 4”. It would be different, perhaps, if the problem was “item 1.1” through “item 2.2”, for example.

Finally, multiple list solutions are nothing new. People have floated elements into “columns” for a very long time. Float the first “column” and give a margin left to the second one. There’s nothing special about lists, really. The only “issue” then is a containing floats problem which has very well documented solutions.

posted at 07:55 am on February 23, 2005 by mmmbeer

74 Just FYI

Nandini, I looked at the linked site—it looks really good, but I thought you’d like to know that on the “about us” page, the text in the second paragraph goes past the center background box and spills out over the outer background. I’m using Safari 1.2.4 on OSX. Hope this helps!

posted at 02:49 pm on February 23, 2005 by Crystal Southern

75 Thanks, Crystal

Thanks for your valuable feedback, Crystal. I’ll try my best to sort out the mystery of the paragraph spill.

posted at 10:40 pm on February 23, 2005 by Nandini Doreswamy

76 Netscape

Did you know that Netscape 7.1 doesn´t render your page very well? The lists are missing!

www.radiusnetworks.co.nz/computer-services.htm

posted at 03:46 am on February 25, 2005 by serge

77 What about paginating these lists using database c

This solution is really great for a fixed number of bullets. What if your data is pulled in dynamically and you want the items to run in a columnar fashion? For example: a list of birthdays for a particular month that are ordered by day, top-to-bottom. How could these lists get rendered semi-evenly across 3 columns (or so) using CSS?

posted at 07:57 am on February 25, 2005 by Chris

78 Old trick

FWIW, I did a write-up on this about a year ago. Please see:

http://wickedways.org/articles/floatinglists/

posted at 07:10 am on February 27, 2005 by Christian von Kleist

79 Huh?

Not sure how this got published. 1. This would be cool if the it was all in one list with no special classes for left/right 2. Paragraph spacing issue should be fixed by just setting the default padding/margins for paragraphs. 3. More reasons…
I expect more.

posted at 11:29 pm on February 27, 2005 by John

80 a keeper...

i’ll be sure to use this in the future. this beats the implementation the make-shift solution i did for my portfolio site’s 2-column list.

posted at 02:29 pm on February 28, 2005 by sherwin techico