If there's any chance of the list items wrapping, as one does in your
example, then you're asking the impossible. Even if you could calculate
which items were going to wrap server-side, it'd fall apart on text resize.
Maybe with CSS 3 multi-column support, but not with the current crop of
browsers.

However, this could be done with JavaScript triggered on page load:

. Intitially, set the container with no height, and the ul the width of a
single column
. Sniff the heights of all the list items
. Tot up the list item heights until they go over the proposed height of the
container
. DOM insert </ul><ul> at the appropriate break
. Remove or hide any list items that don't fit
. Float all the lists left
. Set the container height
. Call the procedure on text resize. There's another article on ALA that
explains how to do this.

A framework like Mootools would make this kind of thing fairly painless, but
you will lose some backwards compatibility.

As further discussion of JavaScript would be off-topic for this list, maybe
someone can point you in the direction of a good JS list if you decide to
pursue this course.


<snip>

This is my first post to css-d so please bear with me. I have a very
specific situation and I feel there definitely must be a solution that I
just can't figure out.

Server-side code is generating a list of items for me, and I want to display
the list in fixed-height, fixed width columns, i.e. items would go down the
first column and then flow to the right. I am picturing an article flowing
between linked textboxes in Quark or Pagemaker.

Here is a page that describes what I want to do...
http://donzacharias.com/listflow.htm

Basically I want the list to show as many items as will fit in a certain
pixel or em height in column 1, and then continue to the right. This List
Apart article comes very close to what I want to do
http://www.alistapart.com/articles/multicolumnlists

but I don't want to do a fixed number of items in each column; I want to
fill up as much of the column as possible before flowing to the next column.
I am completely flexible as far as markup goes...i.e. if something about
UL/LI is getting in the way I can do nested divs etc.

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

Reply via email to