Arrange HTML description list's terms horizontaly

Question

I have an auto-generated HTML <dl> tag with two <dd> tags, the list is automatically split into two. I want to be able to arrange the result horizontally in chronological order.

This is how I have it right now.

<dl class="filter-books">
  <dt><h3>Books</h3></dt>
    <dd class="col1">
      <input type="checkbox" name="topic_books[]" id="book_109" value="109" >
      <label class="book book-1" for="book_109"> Book 1 </label>
    </dd>

    <dd class="col1">
      <input type="checkbox" name="topic_books[]" id="book_96" value="96" >
      <label class="book book-2" for="book_96"> Book 2 </label>
    </dd>

    <dd class="col1">
      <input type="checkbox" name="topic_books[]" id="book_89" value="89" >
      <label class="book book-3" for="book_89"> Book 3 </label>
    </dd>

    <dd class="col2">
      <input type="checkbox" name="topic_books[]" id="book_16" value="16" >
      <label class="book book-4" for="book_16"> Book 4 </label>
    </dd>

    <dd class="col2">
      <input type="checkbox" name="topic_books[]" id="book_88" value="88" >
      <label class="book book-5" for="book_88"> Book 5 </label>
    </dd>

    <dd class="col2">
      <input type="checkbox" name="topic_books[]" id="book_98" value="98" >
      <label class="book book-6" for="book_98"> Book 6 </label>
    </dd>
</dl>

CSS:

dd { float: left; width: 45%; padding-bottom: 0.5em; margin-left: 1em; }

JSFiddle of current display.

How I wish it to be is how the display is in this JSFiddle. The HTML list in this fiddle has only been modified to show desired result.

Any help is appreciated. Thanks in advanced.

Answer 1

Given that the length of the list is known, the following will work: http://jsfiddle.net/u63jS/.

CSS:

dd {
    display: inline-block;
    width: 45%; 
    padding-bottom: 0.5em; 
    margin-left: 1em; 
}

dd:nth-of-type(-n + 3) {
    float: left;
    clear: left;
}

And, the following code will work in older browsers (e.g., IE6): http://jsfiddle.net/u63jS/1/.

dd {
    display: inline-block;
    width: 45%; 
    padding-bottom: 0.5em; 
    margin-left: 1em; 
}

dt + dd,
dt + dd + dd, 
dt + dd + dd + dd {
    float: left;
    clear: left;
}

Another, an unnecessarily complicated, but modern flexbox solution: http://jsfiddle.net/s6W5w/.

* {
    margin: 0;
    padding: 0;
}

body {
    padding: 10px;
}

.filter-books {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}

.filter-books > dt {
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
}

.filter-books > dd {
    -webkit-flex: 0 0 50%;
    flex: 0 0 50%;
}

.filter-books > dd:nth-of-type(1) {
    order: 1;
}

.filter-books > dd:nth-of-type(2) {
    order: 3;
}

.filter-books > dd:nth-of-type(3) {
    order: 5;
}

.filter-books > dd:nth-of-type(4) {
    order: 2;
}

.filter-books > dd:nth-of-type(5) {
    order: 4;
}

.filter-books > dd:nth-of-type(6) {
    order: 6;
}

Lastly, a solution that uses columns: http://jsfiddle.net/2Z9CT/.

* {
    margin: 0;
    padding: 0;
}

body {
    padding: 10px;
}

dl > dt {
    position: absolute;
    top: 0;
}

dl {
    margin-top: 25px;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count:2;
}

dl > dd {
    display: block;
}

Answer 2

If jquery is allowed you can use .wrapAll() function. check the DEMO.

This jquery code will move all dd have class col2

$('dd.col2').wrapAll('<div class="sub-menu" />');

CSS used to fix the alignment.

.sub-menu{
    float: right;
    position: absolute;
    right: 0;
    top: 40px;
    width: 48%;
}
.filter-books{position:relative;}

Answer 3

This does it, but I don't know how you are generating the data.

<dl class="filter-books">
  <dt><h3>Books</h3></dt>
    <dd class="col1">
      <input type="checkbox" name="topic_books[]" id="book_109" value="109" >
      <label class="book book-1" for="book_109"> Book 1 </label>
    </dd>
    <dd class="col2">
      <input type="checkbox" name="topic_books[]" id="book_16" value="16" >
      <label class="book book-4" for="book_16"> Book 4 </label>
    </dd>
    <dd class="col1">
      <input type="checkbox" name="topic_books[]" id="book_96" value="96" >
      <label class="book book-2" for="book_96"> Book 2 </label>
    </dd>

    <dd class="col2">
      <input type="checkbox" name="topic_books[]" id="book_88" value="88" >
      <label class="book book-5" for="book_88"> Book 5 </label>
    </dd>

    <dd class="col1">
      <input type="checkbox" name="topic_books[]" id="book_89" value="89" >
      <label class="book book-3" for="book_89"> Book 3 </label>
    </dd>

    <dd class="col2">
      <input type="checkbox" name="topic_books[]" id="book_98" value="98" >
      <label class="book book-6" for="book_98"> Book 6 </label>
    </dd>
</dl>