Skip to content

Instantly share code, notes, and snippets.

@samny
Last active May 23, 2017 10:19
Show Gist options
  • Save samny/4492351 to your computer and use it in GitHub Desktop.
Save samny/4492351 to your computer and use it in GitHub Desktop.
Best way I found of styling a definition list as name value pairs and allowing either dt or dl to span multiple rows. http://www.css-101.org/articles/glossary-and-table-format/definition-list.php
dl.job-info{
width:100%;
overflow:hidden;
}
dl.job-info dt {
font-weight:600;
float:left;
width:49%;
clear:both;
padding:0;
padding-bottom:3px;
position:relative;
}
dl.job-info dd {
float:right;
width:51%;
padding:0;
padding-bottom:3px;
margin-left:0;
}
dl.job-info dd {
*float:none;
*width:auto;
*margin-left:49%;
}
<dl>
<dt>Name 1</dt>
<dd>Definition 1</dd>
<dt>A really long name spanning several rows</dt>
<dd>Definition 2</dd>
<dt>Name 3</dt>
<dd>Definition 3</dd>
<dt>Name 4</dt>
<dd>A really long definition spanning several rows</dd>
<dt>Name 5</dt>
<dd>Definition 5</dd>
<dt>Name 6</dt>
<dd>Definition 6</dd>
<dt>Name 7</dt>
<dd>Definition 7</dd>
</dl>
dl{
letter-spacing:-0.31em;
*letter-spacing:normal;
word-spacing:-0.43em;
}
dl dt,
dl dd {
display:inline-block;
*display:inline;
zoom:1;
letter-spacing:normal;
word-spacing:normal;
vertical-align:top;
margin:0;
}
dl dt{
font-weight:600;
width:48%;
padding: 0 2% 0.5em 0;
}
dl dd{
margin-right:-1px;
width:50%;
padding: 0 0 0.5em 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment