www.webdeveloper.com
Results 1 to 7 of 7

Thread: Multi-column list

  1. #1
    Join Date
    May 2011
    Posts
    4

    Post Multi-column list

    Hello,

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

    HTML Code:
    <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!

  2. #2
    Join Date
    Nov 2010
    Location
    Los Angeles, CA
    Posts
    234
    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.

  3. #3
    Join Date
    May 2011
    Posts
    4
    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.

  4. #4
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,132
    There's a way

    This article has some great examples:
    http://www.alistapart.com/articles/multicolumnlists/
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  5. #5
    Join Date
    May 2011
    Posts
    4
    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.

  6. #6
    Join Date
    Aug 2006
    Posts
    1,918
    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

  7. #7
    Join Date
    May 2011
    Posts
    4
    Unfortunately I was trying to do this all within the framework of Google Sites which allows neither PHP nor js.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles