How can I create a 2 column bullet list?

HTML & CSS
1

I need to find the best way to create a two column bullet list. I am cleaning up my site and need to find a way to consolidate the bullet list of about 20 bullets.

Please help!

(this is in html)

THX!

2

It’s easy if you want the list items in this order:

Instead of
1.
2.
3.
4.
5.
6.

you have them like this:

In that case, you just float the list items left and fix the width of the UL so that there can only be two LIs per line.

If you want them in this order:

that that’s harder.

3

The only way I know of to do his is by setting a specific width of the LI elements and using inline-block for the display property.

EDIT: You just beat me ralph

4

This link will show you abbout 5 ways to do it A List Apart: Articles: CSS Swag: Multi-Column Lists

5

This was also featured in Paul O’Brien’s CSS Quiz, No. 30.

Here’s a modified version:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>List Items Divided in Ordered Columns</title>
<style type="text/css">
#columnlist {
    margin:auto;
    width:80%;
    font:75%/1.5 arial;
}
#columnlist h1 {
    float:left;
    width:100%;
    font-size:167%;
}
#columnlist ul {
    margin:0;
    padding:0;
}
#columnlist li {
    width:33%;
}
#columnlist .col1 {
    color:#c00;
}
#columnlist .col2 {
    margin-left:33.5%;
    color:#990;
}
#columnlist .col3 {
    margin-left:67%;
    color:#090;
}
#columnlist .col1+.col2, #columnlist .col2+.col3 {
    clear:left;
    margin-top:-9999px;
}

/* opera*/
.col1+.col2:before,
.col2+.col3:before{
    content:".";
  display:block;
  height:0;
    float:none;
    clear:both;
    visibility:hidden;
}

/* IE7 */
*+html #columnlist .col1+.col2, *+html #columnlist .col2+.col3 {
    clear:none;
    margin-top:0;
}
*+html #columnlist .col1 {
    clear:left;
    float:left;
}
*+html #columnlist .col2 {
    position:relative;
    left:-33.5%;
    clear:right;
    float:right;
    margin:0;
}
*+html #columnlist .col3 {
    position:relative;
    right:-34%;
    margin:0;
}
/* IE6 */
* html #columnlist .col1 {
    clear:left;
    float:left;
    margin-left:-3px;
}
* html #columnlist .col2 {
    position:relative;
    left:-33.5%;
    clear:right;
    float:right;
    margin:0 -3px 0 0;
}
* html #columnlist .col3 {
    position:relative;
    right:-34%;
    margin:0;
}
</style>
</head>
<body>
<div id="columnlist">
    <h1>CSS2 - List Items Divided in Ordered Columns</h1>
    <ol>
        <li class="col1">Column One, Item 1</li>
        <li class="col1">Column One, Item 2</li>
        <li class="col1">Column One, Item 3</li>
        <li class="col1">Column One, Item 4</li>
        <li class="col1">Column One, Item 5</li>
        <li class="col1">Column One, Item 6</li>
        <li class="col1">Column One, Item 7</li>
        <li class="col1">Column One, Item 8</li>
        <li class="col1">Column One, Item 9</li>
        <li class="col1">Column One, Item 10</li>
        <li class="col1">Column One, Item 11</li>
        <li class="col1">Column One, Item 12</li>
        <li class="col1">Column One, Item 13</li>
        <li class="col1">Column One, Item 14</li>
        <li class="col1">Column One, Item 15</li>
        <li class="col1">Column One, Item 16</li>
        <li class="col1">Column One, Item 17</li>
        <li class="col1">Column One, Item 18</li>
        <li class="col2">Column Two, Item 19</li>
        <li class="col2">Column Two, Item 20</li>
        <li class="col2">Column Two, Item 21</li>
        <li class="col2">Column Two, Item 22</li>
        <li class="col2">Column Two, Item 23</li>
        <li class="col2">Column Two, Item 24</li>
        <li class="col2">Column Two, Item 25</li>
        <li class="col2">Column Two, Item 26</li>
        <li class="col2">Column Two, Item 27</li>
        <li class="col2">Column Two, Item 28</li>
        <li class="col2">Column Two, Item 29</li>
        <li class="col2">Column Two, Item 30</li>
        <li class="col3">Column Three, Item 31</li>
        <li class="col3">Column Three, Item 32</li>
        <li class="col3">Column Three, Item 33</li>
        <li class="col3">Column Three, Item 34</li>
        <li class="col3">Column Three, Item 35</li>
        <li class="col3">Column Three, Item 36</li>
        <li class="col3">Column Three, Item 37</li>
        <li class="col3">Column Three, Item 38</li>
        <li class="col3">Column Three, Item 39</li>
        <li class="col3">Column Three, Item 40</li>
        <li class="col3">Column Three, Item 41</li>
        <li class="col3">Column Three, Item 42</li>
        <li class="col3">Column Three, Item 43</li>
        <li class="col3">Column Three, Item 44</li>
        <li class="col3">Column Three, Item 45</li>
        <!-- number of items can change
    <li class="col3">Column Three, Item 46</li>
    <li class="col3">Column Three, Item 47</li>
    <li class="col3">Column Three, Item 48</li> -->
    </ol>
</div>
</body>
</html>
6

Thx Rguy84, that’s a pretty informative link that shows the coding. I’m going to try it today. I’ll let you know if it works!