CSS floating dt/dd left in pairs

Question

I have the following html code:

<dl>
  <dt>term1</dt><dd>defn1</dd>
  <dt>term2</dt><dd>defn2</dd>
  <dt>term3</dt><dd>defn3</dd>
</dl>

I'm trying to have them floated in pairs (same width), with all the dts going on the first line and all the dds on the second one.

Like this:

term1 term2 term3
defn1 defn2 defn3

I have tried all sorts of combinations of display: block (+floats/clears), inline-block, table-*, flex, but none came any close.

Any idea how it could be done?

Answer 1

Here's one using flex box with no changes to your list, just CSS. Basically just defining the order of the children of dl using the nth-child pseudo selector. The calc() method used here is unfortunately dependent upon knowing the number of children in your list (in my example: 4).

With just CSS you can't really determine the number of children, but you can count siblings and prepare your CSS for different situations if you know the maximum number of items in your list:

Can CSS detect the number of children an element has?

dl {
  display: flex;
  flex-flow: row wrap;
}

dt,dd {
  margin: 0;
  flex-grow: 1;
  }

dt {
  order: 0;
  flex-basis: calc(100%/4);
}

dd {
  order: 1;
  flex-basis: calc(100%/4);
}

<dl>
  <dt>term1</dt><dd>defn1</dd>
  <dt>term2</dt><dd>defn2</dd>
  <dt>term3</dt><dd>defn3</dd>
  <dt>term4</dt><dd>defn4</dd>
</dl>

Answer 2

I achieved what you want with flex, but only by adding the wrapper that controls the overall width.

Only change to your html markup is the div wrapper.

div {
  width: 50%;
}
dl {

	-ms-flex-direction: row;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
	
    -ms-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

dt {
min-width: 30%;

  -webkit-box-flex: 0 0 30%;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 0 0 30%;         /* OLD - Firefox 19- */
  -moz-flex: 0 0 30%;  
               /* For old syntax, otherwise collapses. */
  -webkit-flex: 0 0 30%;          /* Chrome */
  -ms-flex: 0 0 30%;              /* IE 10 */
  flex: 0 0 30%;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  
  -webkit-box-ordinal-group: 1;  
  -moz-box-ordinal-group: 1;     
  -ms-flex-order: 1;     
  -webkit-order: 1;  
  order: 1;

}

dd {
min-width: 30%;

  -webkit-box-flex: 0 0 30%;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 0 0 30%;         /* OLD - Firefox 19- */
    -moz-flex: 0 0 30%;
                 /* For old syntax, otherwise collapses. */
  -webkit-flex: 0 0 30%;          /* Chrome */
  -ms-flex: 0 0 30%;              /* IE 10 */
  flex: 0 0 30%;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
   
  -webkit-box-ordinal-group: 2;  
  -moz-box-ordinal-group: 2;     
  -ms-flex-order: 2;     
  -webkit-order: 2;  
  order: 2;
   
  margin-left: 0;
}

<div>
  <dl>
    <dt>term1</dt>
    <dd>defn1</dd>
    <dt>term2</dt>
    <dd>defn2</dd>
    <dt>term3</dt>
    <dd>defn3</dd>
  </dl>
</div>