CJ,

Yes, it is possible to wrap a list into multiple vertical columns using CSS; I've got an article on CSS swag in an upcoming edition of A List Apart detailing various methods. However, the resizing method I use is limited to sizing everything in ems, from the font size to the list item block dimension. The number of columns is fixed in the stylesheet.

The resizing method you're suggesting -- keeping the list-item-size fixed and changing the number of columns per window width -- requires, I believe, either:
        a) different list styling per window width or
        b) different item sequencing in the markup per window width.
Both are feasible using server- or client-side scripting:
        a) modify the stylesheet on the fly or
b) let the list items float left, which will wrap them neatly into as many columns as the window allows, then use scripting to plug values into the list in a sequence that makes sense vertically.

Using CSS alone, I think you're going to run into problems -- such as the kind of problem that's illustrated below, the way your 1024x768 example wrapped in email.

I'll keep my eyes & ears wide open for innovative suggestions on this issue, but today I think you're wanting something that CSS alone can't provide.

Regards,
Paul


At 07:01 AM 8/24/2005, CJ Larson wrote:
I need to display a list of features we offer and am think that the best
way would be to have the list expand or contract depending on how much
room the main content area width allows.

For example, in 1024x768:
- Item #1               - Item #4               - Item #7
- Item #10
- Item #2               - Item #5               - Item #8
- Item #11
- Item #3               - Item #6               - Item #9
- Item #12

And in 800x600 it would "collapse" to:
- Item #1               - Item #5               - Item #9
- Item #2               - Item #6               - Item #10
- Item #3               - Item #7               - Item #11
- Item #4               - Item #8               - Item #12

I saw a post this week about a newspaper-style site doing something
similar, but with the vertical height instead of horizontal.  In my
case, it's fine if these scroll down the page, but the goal would be to
keep the vertical scrolling to a minimum, hence them spanning the width.

What code I use (ie <ul>, <p>, <div>, <span>, etc) to spit the list out
from my database is completely open, as long as I can get the
functionality.  Is this possible with CSS?  Pointers to a site or help
section dealing with this that I overlooked are also very welcome.


Thanks for looking.  :)
~ cj
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to