SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2009
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to create a 2-column unordered list

    In my css layout, I want to create an unordered list that flows into two columns. How do I do that?

    thanks!
    susan

    -- I'm not sure if this is a reqular question or a css question, so I apologize in advance for xposting in the css forum.

  2. #2
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To my knowledge, only the Firefox family of browsers (Gecko) supports flowed columns, a css3 property group.

    You can simulate it by floating list items, but it will not dynamically re-flow.

    Please tell us what you're trying too do in this specific case, and we can probably come up with a workable solution.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2009
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Gary,

    Here's a link to the rough page layout showing the text in one column:

    http://susan-unger.home.comcast.net/...ow/client.html

    As you can see, the client list is kind of long (and ugly) and I'd rather it be designed into two columns. I thought about doing a table or doing two floating divs, but I'm not sure if either of those would be the right way to go.

    I found an article online that confused me more than clarified things... :

    http://www.alistapart.com/articles/multicolumnlists

    Any thoughts would be greatly appreciated.
    thanks!
    susan

  4. #4
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Strictly speaking, these are not flowed columns. The order goes left-right, left-right, etc., rather than down, then up to the next column.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta http-equiv="Content-Type"
            content="text/html; charset=utf-8" />
    
      <title>oxbow associates</title>
      <style type="text/css">
    /*<![CDATA[*/
    
    .client_list li {
        display: -moz-inline-box
        display: inline-block;
        width: 49&#37;;
        }
    
    * html .client_list li {
        display: inline;
        }
    
    *+html .client_list li {
        display: inline;
        }
    
      /*]]>*/
      </style>
    </head>
    
    <body>
      <div id="wrapper">
        <p>Plaeholder text. One or two sentences would
        be nice here. We have had the pleasure of working with the
        following companies and agencies for lorem ipsum dolore.</p>
    
        <ul class="client_list">
          <li>Astro Crane Service</li>
    
          <li>Bay Club of Mattapoisett (The)</li>
    
          <li>Berkshire School (The)</li>
    
          <li>Bolton, Town of</li>
    
          <li>Boxborough, Town of</li>
    
          <li>Boxford, Town of</li>
    
          <li>Central Connecticut Coast YMCA</li>
    
          <li>Charleton, Town of</li>
    
          <li>Clough, Harbour &amp; Associates</li>
    
          <li>Concord Property Management</li>
    
          <li>Deaconess Abundant Life Communities</li>
    
          <li>E. T. &amp; L. Corp</li>
    
          <li>Emanouil Brothers Corp.</li>
    
          <li>Epsilon Associates, Inc.</li>
    
          <li>Falmouth, Town of</li>
    
          <li>First Colony Development Corp.</li>
    
          <li>Foley-Fiore Architects</li>
    
          <li>Geiss Corp.</li>
    
          <li>Georgetown, Town of</li>
    
          <li>Grappone</li>
    
          <li>Greater New Bedford Business Park</li>
    
          <li>JMD Realty/Manchester Sand &amp; Gravel Co.</li>
    
          <li>Mr. Sumner Redstone</li>
    
          <li>National Grid/Keyspan Energy</li>
    
          <li>Northeast Utilities</li>
    
          <li>Omni Properties</li>
    
          <li>Pioneer Valley Energy Center</li>
    
          <li>SEA Consultants</li>
    
          <li>TRC Corp</li>
    
          <li>URS Corp.</li>
    
          <li>US Fish &amp; Wildlife Service</li>
    
          <li>US Army Corp of Engineers, NED</li>
    
          <li>Winchester, Town of</li>
    
          <li>Winston Builders, Inc.</li>
    
          <li>Metcalf &amp; Eddy</li>
        </ul>
      </div> <!-- end wrapper -->
    </body>
    </html>
    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2009
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Gary,

    Thank you for the code. I did a test page and copied it into the code view (I'm using Dreamweaver CS4), and the list came out as a one-column list. Do I need to style every other line to make it inline? I see that there are three styles in the CSS style window. I'm not sure how to move the lines into a two column or which styles to use.

    thanks again,
    susan

  6. #6
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,403
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Here's what I use for a simple 2 column list...

    the HTML
    Code:
    <ul class="list2col">
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    </ul>
    the CSS
    Code:
    ul.list2col {float: left; width: 100%; margin: 0 0 1em 0;}
    ul.list2col li {float: left; width: 49%;}

  7. #7
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by spu View Post
    Hi Gary,

    Thank you for the code. I did a test page and copied it into the code view (I'm using Dreamweaver CS4), and the list came out as a one-column list. <snip> I see that there are three styles in the CSS style window. I'm not sure how to move the lines into a two column or which styles to use.
    All three rulesets can be put in either your style sheet, or be embedded in the head element as I did in the demo.
    Code:
    .client_list li {
        display: -moz-inline-box
        display: inline-block;
        width: 49%;
        }
    Every li in the ul.client_list is made inline-block and is given a width slightly less than half its parent, so that there is room allowed for the inline white space, and so that there is only room for two list-items per line. The -moz-inline-box is Mozilla's proprietary experimental property for Firefox2 which doesn't support inline-block. This ruleset takes care of the modern browsers.

    Code:
    * html .client_list li {
        display: inline;
        }
    
    *+html .client_list li {
        display: inline;
        }
    IE6&7 don't support inline-block. Instead, we set hasLayout by either declaring a width or by setting display to inline-block. We did both Now we have to set the display to inline without affecting other browsers. The "* html" and the "*+html" hacks serve to isolate IE6 and IE7 respectively.

    Do I need to style every other line to make it inline?
    Every li is already styled as it needs to be. Simply give the parent ul the class name, and its list-items are styled by the selector ".client_list li".

    Open a new file, and remove every scrap of crap that DW might put there. Then paste my demo complete and as is. Save, and open in your browser.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials


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
  •