How to make definitions of definition list in two columns

Question

I'm trying to list movie info, and I want the "cast" list to have two columns, instead of one long column to make better use of horizontal space.

A similar question was asked here:Multi-column definition list

but that is NOT the same question I have. That user was trying to split the dt into two columns, and I want to split one set of the dd into two columns. Here's my code:

div><h3>
    <dl>
      <dt>Director:</dt>
        <dd>Person A</dd><br>
      <dt>Writer:</dt>
        <dd>Person B</dd><br>
      <dt>Cast:</dt>
        <dd>Person C</dd>
        <dd>Person D</dd>
        <dd>Person E</dd>
        <dd>Person F</dd>
        <dd>Person G</dd>
        <dd>Person H</dd>
        <dd>Person I</dd>
    </dl></h3>
  </div>

My CSS:

dl {
border: 3px double #ccc;
padding: 0.5em;
}
dt {
float: left;
font-weight: 400;
}
dd {
margin-left: 125px;
font-weight: 300;
}

Again, I'm looking to make just the cast list two columns. Any and all help is appreciated!

I'm totally open to using other lists or non-definition lists.

score 2 · Accepted Answer · answered Oct 24 '16 at 17:14

2

I had a go using CSS only, using a float and clear approach:

dt {
    width: 50%;
    padding: 15px;
    float: left;
    clear: right;
    background: lightgreen;
}
dd {
    width: 50%; 
    padding: 15px;
    float: right;
    clear: right;
    background: skyblue; 
}

See: https://jsfiddle.net/luminancedesign/wngjs3wg/

answered Oct 24 '16 at 17:14

luminancedesign

362
2
5

I had to add a wrappr div with .wrapper `dl, .wrapper dt, .wrapper dd` in place of the `*` universal selector in for the first class to get the intended result, becuase I didn't want to apply those styles to the whole page. +1 for an easy to apply solution. – Rin and Len Nov 02 '21 at 07:19

score 1 · Answer 2 · answered Aug 15 '14 at 21:13

1

well, you can simply float the dd, like this:

dd{width:50%; float:left}

if you're looking to use dd, I think this is the closes to a solution you will find. However, if you're open to use other techniques, like regular lists, p, block elements, etc, you can use column-count (doesn't work in dd) . See more info at column count property

answered Aug 15 '14 at 21:13

Devin

7,690
6
39
54

1

And be sure to contain the floated `
`s, either with the [clearfix hack](http://nicolasgallagher.com/micro-clearfix-hack/) on the `
` or by using `dt {overflow: hidden;}` in your CSS.
– simmer Aug 15 '14 at 21:18
1

yes, of course, but I think that's a given in any floated element, hence why I didn't mention it, but `dl, dt{clear:both}` should be enough – Devin Aug 15 '14 at 21:20
I tried this and it doesn't work. I had better luck with your column count link, but still no success. You'll see in my CSS that I floated the dt, and it's affecting the columns for some reason. – singmotor Aug 15 '14 at 22:17

score 0 · Answer 3 · answered Aug 15 '14 at 21:12

0

Something like this?

dl { position: relative; }
dd { margin-left: 100px; }
dt { position: absolute; }

Demo

Not a very good way, but the only way I can think of with this kind of html and without any js.

answered Aug 15 '14 at 21:12

drip

12,378
2
30
49

How to make definitions of definition list in two columns

3 Answers3