Sonhja Sonhja - 3 years ago 265
CSS Question

How to make a dl list horizontal

I have a list that looks like this:

<dd><div>Div with an image</div></dd>
<dd><div>Second Div</div></dd>

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

Div with an image
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 Source

Take a look at this article

This solution will also work with 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>


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

Here is the working example

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download