1 and where's the semantics again?

classes like “left” and “right” are not good names to begin with, furthermore, chopping a list into two is another bad thing, because we are dealing with single lists here.

In this case I’d rather go for absolutely positioned li’s in one ul

posted at 11:39 am on February 16, 2005 by Rikkert Koppes

2 Thanks!

I like the way this is handled. I was recently talking about doing something similar on one of our sites and was having some issues with things lining up like this.

posted at 11:42 am on February 16, 2005 by Robby Russell

3 are the paragraph classes necessary?

in your example, all of the elements get the class – wouldn’t it be easier to use a #div p selector?

posted at 11:46 am on February 16, 2005 by nic

4 Re: and where's the semantics again?

Rikkert Koppes is right. I had the same thought while reading the article.

I can’t add anything more to that.

posted at 11:46 am on February 16, 2005 by Denis Defreyne

5 My 2 cents

I don’t know if its right, but i would have gone for one ul set to a fixed width and the li’s set to half the width and to floatnext to each other. That way you would get the look of two lists from the one, without more css than necessary. But hey, thats just my opinion.

posted at 11:50 am on February 16, 2005 by Josh Townson

6 Just a thought

Why not have it in one list (instead of two), float all li, but give them a width of 50% (thus making sure there are only two list items per row)… Haven’t tried it, could that work as well?

posted at 11:59 am on February 16, 2005 by Alicia

7 A few issues...

There are a couple of things wrong with this article.

The classes have been used somewhat injudiciously. A better choice would be to use descendant selectors.

Based on the “example in the wild” Nandini posted, I would say that semantically, there is only one list, which needs to be displayed in a particular fashion.

My approach:

http://mechavox.com/sandbox/layeredfudge.html

was to wrap the content in a container div and use descendant selectors to apply styles. There is only one list between each paragraph. The ul’s have a fixed width and the li’s are floated. You can see this in action at the above example.

posted at 12:08 pm on February 16, 2005 by Stephen Caudill

8 But what about....

Paired lists where one is longer than the other. I saved the example to my hard drive and added an extra bullet to the right list in the first pair and an extra one to the left list in the second pair.
[url=“http://www.webcudgel.com/misc/sample1.html”]View the new sample here[/url]

The whole thing breaks down in IE and FF. So this is only good for lists containing even numbers of elements.

posted at 12:09 pm on February 16, 2005 by Charles Martin

9 heh

I should read directions more.

posted at 12:10 pm on February 16, 2005 by Charles Martin

10 And that works well with odd numbered lists

Stephen’s example just above does allow for odd-numbered lists and so it works quite well.

However, what if the client requests that the items be numbered? They’re not going to want the numbering to jump back and forth like that. Anyone got any ideas?

posted at 12:13 pm on February 16, 2005 by Charles Martin