How to create a 2-column unordered list

Get Started
1

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

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

3

Hi Gary,

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

http://susan-unger.home.comcast.net/~susan-unger/oxbow/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… :

Any thoughts would be greatly appreciated.
thanks!
susan

4

Strictly speaking, these are not flowed columns. The order goes left-right, left-right, etc., rather than down, then up to the next column.

<!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

5

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

Here’s what I use for a simple 2 column list…

the HTML

<ul class="list2col">
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>

the CSS

ul.list2col {float: left; width: 100%; margin: 0 0 1em 0;}
ul.list2col li {float: left; width: 49%;}
7

All three rulesets can be put in either your style sheet, or be embedded in the head element as I did in the demo.

.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.

* 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 :slight_smile: 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