CSS styling definition lists

Richard informed me he had problems styling the definition list used in my custom Blogger comments form in combination with Blogger backlinks.

He is using using absolute positioning, a styling method I explained in my post on semantic forms:

form dt {
  position: absolute;
  z-index: 2;
}

form dd {
  position: relative;
  padding-left: 100px;
}

Absolute positioning may get you in trouble some times. Another way of styling definition list is by floating the definition title in the left margin of the definition data:

form dt {
  float: left;
  width: 95px;
  white-space: nowrap;
  overflow: hidden;
}

form dd {
  margin-left: 100px;
}

Note: floating may get you in trouble some times as well. Just try which method suites you best.

Tags:

• CSS
• HTML
• Forms
• Semantic
• Definition list