Creating Two Column Unordered <ul> Lists
November 5th, 2009
I’ve been searching like mad how to split an unordered list <ul> into two columns and haven’t found an easy solution. By using combined info from a few sites I figured out an easy way to do it. If you already know how to do this then mozie on down folks. Here it is:
Make a <div class=”double_column_list”> and put a <ul> in it with some list items. Set the <li> class to display at 50% width and float it to the left.
CSS
.double_column_list li {float: left; width: 50%;}
HTML
<div class="double_column_list"> <ul> <li>Awesome Stuff</li> <li>Awesome Stuff</li> <li>Awesome Stuff</li> <li>Awesome Stuff</li> </ul> </div>
- Awesome Stuff
- Awesome Stuff
- Awesome Stuff
- Awesome Stuff
Boosh, 2 column unordered lists.
Listen to My Music
Sketchup
I plan to try this out, very cool. When I have wanted two columns in the past, I made a table.
Then in the table cells unordered lists were made. This method is cool, no need to make the tables. Thanks!
I am upgrading our web site and I used your
two column list on one page and it works
cool. I want to know could I use this in a site map. I tried but it runs together. how do I separate the list. Thanks!
VRY6