6

I have a <dl> like so:

<dl>
<dt id="a_1">Quantity:
<dd id="a_2">
<dt id="b_1">Size:
<dd id="b_2">
<dt id="c_1">Rise:
<dd id="c_2">
<dt id="d_1">Color:
<dd id="d_2">
....
</dl>

This list is generated dynamically through php. I have a container of a certain height. What is the best way to make this list into two columns when it gets too large? If possible, I would like to keep it as a dl though it's not absolutely necessary.

If it helps at all, I'm using bootstrap.

Falantar014
  • 405
  • 2
  • 5
  • 20
  • How are you laying out the `dt`s and their associated `dd`s? – Scott Cranfill Apr 19 '13 at 18:02
  • 3
    you can just define the limit of the column in the php script where it gets generated ... and pack the rest into the second `dl` and place it next to the first one with css ... or you could also look into something with jquery ... here is a simmilar question: http://stackoverflow.com/questions/3009670/flow-2-columns-of-text-automatically-with-css/3039054#3039054 – Martin Turjak Apr 19 '13 at 18:08

1 Answers1

16

The most elegant way would be to use the CSS columns properties:

http://codepen.io/cimmanon/pen/tcyHv

dl {
  columns: 2;
}

dd {
  break-before: avoid;
}

Support for it is fairly good, but Firefox doesn't honor the break-before property (which is being used to prevent the definition from ending up in a different column from its term). Adding prefixes may be necessary.

http://caniuse.com/#feat=multicolumn

cimmanon
  • 67,211
  • 17
  • 165
  • 171