OK, I've got an interesting nested list that I want to style in a crazy way:

<ul>
    <li><div class="col1">First Item</div><div class="col2">Short Description</div></li>
    <li>
        <div class="col1">Second Item</div><div class="col2">Short Description</div>
        <ul>
            <li> <div class="col1">Sub-item I</div><div class="col2">Short Description</div></li>
            <li> <div class="col1">Sub-item II</div><div class="col2">Short Description</div></li>
        </ul>
    </li>
</ul>

Which when rendered, I'd like to look like this:

First Item                    Short Description
Second Item              Short Description
      Sub-Item I             Short Description


      Sub-Item II           Short Description

I'm open to using different markup/structure, so long as I can get the tidy column look. I've tried a handful of things and gotten close, but not quite there. Any suggestions?

4 answers

3
points
This was chosen as the best answer

you would need to do this:

/ * Use reset css before this */

li { overflow:hidden; }
div.col1 { float:left; width:150px;  /* your width */}
div.col2 {margin-left:160px /* slightly more than col1 width */}
Answered about 8 years ago by Divya Manian
3
points

Unless I've misunderstood the problem, this looks like it should be a definition list. This has the added advantage of keeping things aligned if you need a two-line description (right column).

Left column goes in dt tags and the right column goes into dd tags.

<dl>
<dt>Left 1</dt>
<dd>Right 1</dd>
<dt class="sub1">Left 2</dt>
<dd>Right 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</dd>
<dt class="sub1">Left 3</dt>
<dd>Right 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</dd>
<dt>Left 4</dt>
<dd>Right 4</dd>

Then float the dt tags left and give the dd tags a left margin to clear. You can accomplish the sub-items by assigning a class to the dt with the relevant modifications to the rules.

    <style type="text/css" media="screen">
    * {
        margin: 0;
        padding: 0;
    }
    dt {
        float: left;
        width: 150px;
    }
    dt.sub1 {
        padding-left: 15px;
        width: 135px;
    }
    dd {
        margin-left: 150px;
    }
</style>
Answered about 8 years ago by Alex Taylor
  • I actually simplified the description to make it easier to ask the question. In reality I'm going for a couple more columns. I don't think a <DL> works quite here. What did finally work was just setting float: left + a width on each column but the last. Worked a charm. saturdayplace about 8 years ago
  • Excellent, I'm glad you got it working! Alex Taylor about 8 years ago
  • Although the multi-column grid you're describing sounds suspiciously like a table. It's OK to use them for tabular data! Alex Taylor about 8 years ago
  • agreed...it is PREFERED to use a table for tabular data, that's why the table tag exists! :) Discorax about 8 years ago
chris 0
0
points

i haven't done this myself, but your post reminded me of an article i came across at ALA: http://www.alistapart.com/articles/multicolumnlists/ HTH!

Answered about 8 years ago by chris
  • It's a similar problem, but not quite the same. I'd seen similar techniques, but not quite what I'm going for. saturdayplace about 8 years ago
0
points

If as you said in your comment above there are actually more columns for each item, it seems likely that what you have is actually tabular data and a table would be an appropriate solution. Otherwise I would agree that a definition list would be best. A dd is a block container and quite flexible.

Answered about 8 years ago by Richard Grevers