Mar

8

Create a Multiple Column List with CSS

Posted by 1 Comment

If you want to create a multiple column list you don’t need tables or javascript to manipulate the list items, you can do it with a few lines of CSS. First you will want to set the width of list container:

ul {
    width: 400px;
}


Next you will want to set the width of each list element. In this case I want to make a four-column list, the width of the container is set to 400px, so I will set each <li> to 100px. We also need to set the float property of the list elements so they will align properly:

li {
    width: 100px;
    float: left;
}

Now we’ll make a generic list to test the above styling on.

  • Mercury
  • Venus
  • Earth
  • Mars
  • Jupiter
  • Saturn
  • Uranus
  • Neptune
  • Pl…oh wait :(
  • Mercury
  • Venus
  • Earth
  • Mars
  • Jupiter
  • Saturn
  • Uranus
  • Neptune
  • Pl…oh wait :(

 

And with the above styling applied:

  • Mercury
  • Venus
  • Earth
  • Mars
  • Jupiter
  • Saturn
  • Uranus
  • Neptune
  • Pl…oh wait :(

 

Category: CSS, Development, Web Development

Comments (1)

Trackback URL | Comments RSS Feed

  1. Jahmekyat says:

    I use this method all the time in MVC lists using Ul > Li for layout. Works really well. Thanks for sharing.

Leave a Reply