peroyomas peroyomas - 7 months ago 40
HTML Question

HTML/CSS: Keep the same height between the backgrounds of a term-description pair in a table-like definition list

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?

Answer

This works in all browsers

(edit* Alohci - not copying you I swear. Just seen your answer after posting this)

<style type="text/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;
    width: 100px;
    margin-right:-100px;
    padding-right:100px;
}
dl dt, dl dd {
    background-color: #DDD;
}
dl dt.odd, dl dd.odd {
    background-color: #EEE;
}

dl dd {
    float: left;
    width: 100px;
    margin-left: 0;
    padding-left:100px;
    margin-left :-100px
}

span {
    position:relative;
    z-index:10;
}

</style>

<dl>
  <dt class="odd"><span>Key 1</span></dt>
  <dd class="odd"><span>Value 1</span></dd>
  <dt><span>Very very very long key 2</span>
  </dt>
  <dd><span>Value 2</span></dd>
  <dt class="odd"><span>Key 3</span></dt>
  <dd class="odd"><span>Value 3 with<br /> line breaks</span></dd>
  <dt><span>Key 4</span></dt>
  <dd><span>Value 4</span></dd>
</dl>
Comments