Multi-column list

[vip00]

Hello,

I am looking to create a single list that will maintain multiple columns. Here is the example I could come up with.

<ul style="width:18em;font-size:16px">
  <li style="float:left;width:6em">Antelope</li>
  <li style="float:left;width:6em">Bison</li>
  <li style="float:left;width:6em">Camel</li>
  <li style="float:left;width:6em">Deer</li>
  <li style="float:left;width:6em">Eland</li>
  <li style="float:left;width:6em">Gazelle</li>
</ul>

The above generates a 3-column list that populates columns properly. However, the entries go across the list rather down each column. Is there any way to generate a list where the entries go down the column? I have seen several methods where you split the list into multiple sublists or assign individual css classes to each element, but I am looking for a method to generate a list that would automatically adjust its length based on the length of the input and the specified number of columns. Is this possible?

Thank you!

[Big O(1)]

Since the natural flow of static positioning is top-left to bottom-right, you will need to split up the list into left and right containers. Then you can float the left container left and the right container either right or left depending on how much spacing you want.

[vip00]

Thanks for the reply. So there really is no way to do it with a single list? Having multiple lists defeats the point of the project as that would require manual curating to ensure the length of each list stays equal.

[cbVision]

There's a way

This article has some great examples:
http://www.alistapart.com/articles/multicolumnlists/

[vip00]

Thanks for pointing me in that direction. It looks like in all versions of those methods, I have to either subdivide the list into multiple lists or specify which element needs to be at the top of each column. Both of those defeat the point of what I'm trying to do. I am looking to make a vertical list that automatically flows over into subsequent columns.

[tracknut]

Do you have this list of animals as an array in php for example? If so you can certainly automate the dividing into thirds and displaying into three columns. But if you're trying to do this all from static html, I don't know of a way.

Dave

[vip00]

Unfortunately I was trying to do this all within the framework of Google Sites which allows neither PHP nor js.