SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How can I create a 2 column bullet list?

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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:

    1. 2.
    3. 4.
    5. 6.

    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:

    1. 4.
    2. 5.
    3. 6.

    that that's harder.

  3. #3
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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. #4
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    This link will show you abbout 5 ways to do it A List Apart: Articles: CSS Swag: Multi-Column Lists
    Ryan B | My Blog | Twitter

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    This was also featured in Paul O'Brien's CSS Quiz, No. 30.

    Here's a modified version:

    Code:
    <!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. #6
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rguy84 View Post
    This link will show you abbout 5 ways to do it A List Apart: Articles: CSS Swag: Multi-Column Lists
    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!


Tags for this Thread

Bookmarks

Posting Permissions

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