11 about the examples and ideas above

floating li’s results in lists like

1 2
3 4

where the authors goal was

1 3
2 4

this could only be achieved with absolute positioning (or css 3 float: top / column layout)

the spacing problem is one induced by floating the ul’s, which should not be solved by altering default p behaviour.

posted at 12:15 pm on February 16, 2005 by Rikkert Koppes

12 Odd-numbered lists fix

For this article’s example, you can add “clear:both” to the .no-space class and the problem with odd-numbered lists that I described earlier goes away.

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

13 Could be cleaner

I’m not convinced.
I’d like to keep all of the classes for this technique confined to a div tag just for them, otherwise it would be difficult to implement it on a site-wide stylesheet. I also agree about the excess of class tags. This example is also not very size-flexible.
See http://www.ryancannon.com/lib/html/layeredfudge.html
I’ve done a couple of things:

• Relative widths allow these lists to be put anywhere
• Use of margins on the list items instead of relative positioning the list will keep the lists from overlapping

• Fewer class attributes at the cost of a br tag for each group—wouldn’t need it (or class=“second”) if the sibling selector was more widely supported.

Thoughts?

posted at 12:26 pm on February 16, 2005 by Ryan

14 Just not right

This article seems to miss the point of using CSS altogether. You might as well have placed them into some TD’s or turned the thing into an image (al a 1995) and been done with it.

I’d agree with other authors that the best approach would have been a single list – now if someone could come up with some tricky code for correctly positioning the LI’s as desired in this article, that would be bonus man-points.

posted at 12:33 pm on February 16, 2005 by Adam

15 Reminds me of....

[url=“http://www.stuffandnonsense.co.uk/archives/hold_the_front_page_example.html”]Hold the front page[/url] and all the consternation that generated :)

posted at 12:50 pm on February 16, 2005 by John

16 my solution

<ul class=“distribute”> <li class=“col1 row1”>Item 1 Left</li> <li class=“col2 row1”>Item 2 Left</li> <li class=“col1 row2”>Item 3 Right: Another long item</li> <li class=“col2 row2”>Item 4 Right: Right</li> </ul>

in conjunction with:

ul.distribute {
position: relative;
height: 2em;
margin: 0;
}

ul.distribute li {
position: absolute;
}

ul.distribute li.row1 {top: 0em}
ul.distribute li.row2 {top: 1em}

ul.distribute li.col1 {left: 20px}
ul.distribute li.col2 {left: 320px}

this allows much more flexible (re)positioning of things, it also allows strange layouts like organisation charts (I used a similar technique for a company once)

Now is this equal to putting things in tables, well, I admit it’s getting close, ‘cause the classes I used are not the most semantic I guess…

posted at 12:52 pm on February 16, 2005 by Rikkert Koppes

17 Take it easy

> Rikkert Koppes

What happens in your solution if the line is long and is forced to a new line? You’ll have the second LI text right on top of the first LI’s second line text.

The problem with relative positioning is that it cannot be guaranteed to render well in all browsers. The solution proposed in this article addresses this issue. While yes, I agree there is an overuse of class names when selectors could work just fine, I don’t think the “tearing apart” of this author’s article is called for.

For everyone proposing their own supposed better solution:

Did you test in multiple browsers?
Did you test with long strings of text vs. small strings?
Did you test if the text carries over to a new line?

I’m pretty sure Nandini did.

posted at 01:07 pm on February 16, 2005 by Justin Perkins

18 Get your crucifix ready....

Let’s say you have a deadline creeping up, you cannot make predictions on the length of the list items, and the client wants it to look the same in all browsers (>or=5). Why not a simple table?

posted at 01:18 pm on February 16, 2005 by Ed

19 Untitled?

All examples are untitled.

posted at 01:34 pm on February 16, 2005 by Anne

20 How to decrease the CSS lines necessary really qui

I agree with the rest of the folks on here in that there’s no real reason to split the unordered lists up into [code]left[/code] and [code]right[/code]. But if you have to do that, at least be smart about it.

Change this:

[code]
ul.left { float: left; width: 400px; margin: 0px; padding: 0px; border: 0px none; list-style-position: inside; list-style-type: square; }

To this:

[code]
ul.left, ul.right { float: left; width: 400px; margin: 0px; padding: 0px; border: 0px none; list-style-position: inside; list-style-type: square; }
ul.right { float: right; }
[/code]

See, wasn’t that easier?

posted at 01:38 pm on February 16, 2005 by Mike Rundle