Creating a two column Unordered List

Question

I am looking to make a two column Unordered list similar to below but would like to know how to integrate the image of the plus sign as well. I'm looking for a solution with no CSS3 goodness so it can support older browsers.

Here is a link to my website: http://jobspark.ca/job-listings/

I do not have much html for that section yet as I am using Squarespace Template.

This is a screenshot to explain where I am trying to insert the list

Solution

As a prototype, you can start with the following HTML:

<ul class="two-col-special">
    <li>First Category</li>
    <li>Second Category</li>
    <li>Third Category</li>
    <li>Fourth Category</li>
    <li>Fifth Category</li>
</ul>

and apply the following CSS:

.two-col-special {
    border: 1px dotted blue;
    overflow: auto;
    margin: 0;
    padding: 0;
}

.two-col-special li {
    display: inline-block;
    width: 45%;
    margin: 0;
    padding: 0;
    vertical-align: top; /* In case multi-word categories form two lines */
}
.two-col-special li:before {
    content: '+';
    padding: 5px;
    margin-right: 5px; /* you can tweak the gap */
    color: orange;
    background-color: white; /* in case you want a color... */
    display: inline-block;
}

The trick is to change the display type to inline-block and set a width to some number around 45%.

The plus sign is added as a pseudo element before the list item.

If you text (categories) are similar in length, then this will give you a reasonably clean look.

Demo fiddle: http://jsfiddle.net/audetwebdesign/4PdQw/