mawimawi mawimawi - 7 months ago 26
HTML Question

column-count and keep with next in HTML / CSS

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

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>