HTML/CSS: Keep the same height between the backgrounds of a term-description pair in a table-like de
- by peroyomas
I want to format a definition list in HTML as if it were a table with th in a column and td in another, with a background that alternates per row (although a background for the dt and another for the dd also fits for the problem), so I have this CSS:
dl {
font-family: Verdana, Geneva, sans-serif;
font-size: 0.6em;
overflow: hidden;
width: 200px;;
}
dl dt {
font-weight: bold;
float: left;
clear: left;
padding-right: 1%;
width: 48%;
}
dl dt:nth-of-type(odd), dl dd:nth-of-type(odd) {
background-color: #EEE;
}
dl dt:nth-of-type(even), dl dd:nth-of-type(even) {
background-color: #DDD;
}
dl dd {
float: left;
width: 50%;
padding-left: 1%;
margin-left: 0;
}
Example HTML:
<dl>
<dt>Key 1</dt>
<dd>Value 1</dd>
<dt>Very very very long key 2
</dt>
<dd>Value 2</dd>
<dt>Key 3</dt>
<dd>Value 3 with<br /> line breaks</dd>
<dt>Key 4</dt>
<dd>Value 4</dd>
</dl>
The problem is that, due to the eventual height dissimilarity, "holes" with no background appears in the list:
Is there a way to fix that?
