Question

Using the 960.gs framework, I’m trying to create a two columned ordered list where each list item contains a heading and paragraph and the numbering goes across, not down e.g. the top row contains 1,2 not 1,3. The only way I can get it to work is to put a DIV between the OL and LI elements. This doesn’t feel right, I’m sure its wrong although I’m not sure why. What is the correct way to achieve this? I’ve got the following markup;

<div class="container_16">
<ol>
    <div class="grid_8">
        <li><h2>Heading</h2>
            <p>Paragraph</p>
        </li>
    </div>
    <div class="grid_8">
        <li><h2>Heading</h2>
            <p>Paragraph</p>
        </li>
    </div>
    <div class="clear"></div>
    <div class="grid_8">
        <li><h2>Heading</h2>
            <p>Paragraph</p>
        </li>    
    </div>
    <div class="grid_8">
        <li><h2>Heading</h2>
            <p>Paragraph</p>
        </li>    
    </div>
    <div class="clear"></div>
</ol>
</div>

Answer 1

It is invalid to place div elements inside the ol tag.

Only li elements are allowed in there.. (check the W3C documentation on lists)

The theory is to use

ol{width:200px;}
li{float:left;width:50%;}

demo at http://jsfiddle.net/gaby/ZKdpf/1/

---

For the 960.gs system you should use

<ol class="container_16">
    <li class="grid_8">first</li>
    <li class="grid_8">second</li>
    <li class="grid_8">third</li>
    <li class="grid_8">fourth</li>
    <li class="grid_8">fifth</li>
    <li class="grid_8">sixth</li>
</ol>

and add in your css

ol.container_16 li.grid_8{
   display:list-item;
}

to show the numbers again..

demo at http://jsfiddle.net/gaby/ZKdpf/2/

---

Update

Indeed as you mention in your comment you need to clear every two elements, since the height of the li elements is not the same..

For modern browsers you should add

.benefits li:nth-child(odd) {
    clear: left;
}

or your can turn that in a class and add it to the odd numbered li elements.