Two-column definition lists

In the spirit of completeness, here’s a second popular (at least for me) way to use definition lists: to create a simple two-column table.

This approach has some advantages over using actual HTML tables. One is that you don’t need to make sure you close your table rows, because there aren’t any. Another is that it’s more responsive, since you can use media queries to let the definition list revert to its usual styling for narrow screens.

On the other hand, it’s less flexible. You have to specify the width of the first column if you want the second column to line up neatly, something you don’t have to do with tables. Similarly, you can easily extend this to three or more columns, but you have to specify the width of every column except the last one.

Still, since two-column table data is surprisingly common in non-data-intensive content, this is a technique worth using.

dl.twocolumn {
    overflow: auto;
}
dl.twocolumn dt, dl.twocolumn dd {
    float: left;
}
dl.twocolumn dt {
    clear: left;
    margin-right: 2%;
    width: 23%; 
    /* or as wide as you think you'll need it to be */
    /* a second class can override this for selected lists */
}
dl.twocolumn dd {
    width: 75%; /* or whatever's left over from dt */
    margin-left: 0;
}

http://jsfiddle.net/mblase75/6s4Dz/

Leave a Reply

Your email address will not be published. Required fields are marked *

*