I am looking to create a single list that will maintain multiple columns. Here is the example I could come up with.
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?
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.
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.
There's a way
This article has some great examples:
I'm always up for networking with fellow web professionals. Connect with me on LinkedIn
if you like!
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.
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.
Unfortunately I was trying to do this all within the framework of Google Sites which allows neither PHP nor js.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Tags for this Thread