4

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.

enter image description here

This is a screenshot to explain where I am trying to insert the list enter image description here

Chris S
  • 249
  • 2
  • 9
  • 20
  • 2 divs with float property contained within a div, or simply try with a table with 2 columns :P – Hawili Jun 09 '13 at 00:58
  • 2
    I believe that in Squarespace you can customize the CSS? Also, in your list, is it okay if the list items go from left to right and then top to bottom? – Marc Audet Jun 09 '13 at 01:02
  • You bet I made that section a code block so can insert html and customize it with css. Just need to see an example of how set up the code. It doesn't matter which way they go so either is totally fine with me. @Marc Audet – Chris S Jun 09 '13 at 01:43
  • So you want your list items to appear two to a row, and you want a plus sign as a list-marker instead of the usual suspects. – Marc Audet Jun 09 '13 at 01:47

1 Answers1

8

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/

Marc Audet
  • 46,011
  • 11
  • 63
  • 83
  • That is perfect! Thank you so much. Just had one last thing I totally forgot to add. Is it easy to make each category link to a url/page – Chris S Jun 09 '13 at 02:32
  • Do you know why bullets disappear when there is float and you need to use :before? http://stackoverflow.com/questions/24508311/why-li-with-50-width-and-float-left-dont-show-dots-on-the-left – jcubic Jul 01 '14 at 11:19
  • @jcubic Applying the float property to an `li` element will not affect the appearance of the list marker (bullet). However, changing the display type to `inline-block` instead of `list` will remove the list markers. – Marc Audet Sep 09 '14 at 10:39
  • Now figure out how to do this so that the result is column-major instead of row-major... – Mir Apr 20 '15 at 22:38