Last Updated: February 25, 2016
·
6.445K
· bradrice

Using <dl> instead of table for side by side list

If you need a label and a description or in definition terminology a term and a definition list and you want the term next to the definition. You can use css to achieve that with floats.

Suppose this

<dl>
  <dt>term label 1</dt>
  <dd>term definition 1</dd>
  <dt>term label 2</dt>
  <dd>term definition 2</dd>
</dl>

Float will make the label and definition side by side but you need to adjust the widths to make sure the lines break for the next set of term/def. You can use percentages on your css to accomplish this.

dl dd {
padding: 0 1%;
float: left;
width: 88%
}

dl dt {
float: left;
padding: 0 1%;
width: 8%;
margin-top: 0;
}

In this case I decided to give my label 8% of the width and the definition the remainder of 88%. That doesn't add up to 100% because I used 1% padding left to right for each element.

2 Responses
Add your response

funny, i stumbled upon this one earlier today: http://stackoverflow.com/questions/1713048/how-to-style-dt-and-dd-so-they-are-on-the-same-line

i wanted something where dt and dd didn't had a fixed size. so the simple clear:left method works also for me.

over 1 year ago ·

Yes, right Frank, clear: left and clear: right on the dd work when you don't need to use the entire workable space for your list.

over 1 year ago ·