Question

I have a list that looks like this:

<dl>
    <dt>Something</dt>
    <dd><div>Div with an image</div></dd>
    <dt>Second</dt>
    <dd><div>Second Div</div></dd>
</dl>

And when you run it on the page, it looks vertical, and I want it to look horizontal. The code looks like this:

Something
Div with an image
Second
Second Div

But I want something like this:

Something                     Second
Div with an image             Second Div

I can’t change the dl and dt elements order, as it’s a part of code that I can’t modify. But all of them are tagged with classes or ids, so I can modify CSS.

So, is there any way to make the list look horizontal with this structure?

Answer 1

Take a look at this article http://www.alistapart.com/articles/multicolumnlists/

This solution will also work with dl.

HTML

<dl>
    <dt class="col-1">Something</dt>
    <dd class="col-1"><div>Div with an image</div></dd>
    <dt class="col-2 reset">Second</dt>
    <dd class="col-2"><div>Second Div</div></dd>
</dl>

CSS

dt, dd {line-height: 2em;}
.col-1 {width: 48%;}
.col-2 {margin-left: 50%;}
.reset {margin-top: -4em;}

Here is the working example http://jsfiddle.net/YNxCa/

Or you can use some other method, eg. with absolute positioning