column-count and keep with next in HTML / CSS

Question

I have a two column design with a structure e.g.

<div style="-webkit-column-count:2;-moz-column-count:2;column-count:2">
<dl>
 <dt>Category A</dt>
   <dd>Item A1</dd>
   <dd>Item A2</dd>
   <dd>Item A3</dd>
 <dt>Category B</dt>
 -------- here goes the automatic column switch with css [-webkit-|-moz-]column-count:2
   <dd>Item B2</dd>
   <dd>Item B3</dd>
 <dt>Category C</dt>
   <dd>Item C1</dd>
   <dd>Item C2</dd>
</dl>
</div>

In the above example the Category B should go on top of the second column.

Is it possible somehow to make sure that a <dt>Categry</dt> always has at least one <dd>Item</dd> below?

Answer 1

Yes, it's possible with the single definition list as markup.

You just need to make sure that the height of your dt elements are at least double the current line-height, e.g. with padding-bottom, and that any dd element that follows a dt has a negative top-margin to compensate for the padding applied to the dt. Then use break-inside: avoid; to prevent the browser from breaking within your dt element.

Example: https://jsfiddle.net/8tqgw1wx/2/

Relevant CSS:

dt {
  padding-bottom:1.2em; /* Must match your line-height */
  break-inside: avoid;
}
dt + dd {
  margin-top:-1.2em; /* Must match your line-height */
}

Answer 2

Looks like there is no way to solve my problem with the current markup. But I found a reasonable solution using tables having just one cell.

Such a table is being treated as one block that cannot be split. I don't have that many <dd> items per <dt> category, so I can live with the output. Since the whole page is being generated from a database query it's an okay solution for me doing this with a template language which generates output like this:

<div style="-webkit-column-count:2;-moz-column-count:2;column-count:2">

<table><tr><td><dl>
 <dt>Category A</dt>
   <dd>Item A1</dd>
   <dd>Item A2</dd>
   <dd>Item A3</dd>
 </dt>
</dl></td></tr></table>

<table><tr><td><dl>
 <dt>Category B</dt>
   <dd>Item B2</dd>
   <dd>Item B3</dd>
</dl></td></tr></table>

<table><tr><td><dl>
 <dt>Category C</dt>
   <dd>Item C1</dd>
   <dd>Item C2</dd>
</dl></td></tr></table>

</div>