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

Question

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 1

As far as i'm aware, this is not possible with CSS. It is one of the many problems with CSS based forms. The only workaround I know is by using a faux background image representing the what the form should look like, but then this limits the width of the columns.

You may be able to get away with just setting the background-color of the DL, to either the left/right column colour. This may work in this situation.

Answer 2

Getting rid of the holes is possible, it seems, provided you can wrap the contents of each and every dt and dd in a span, so that the foreground colours of both the dt and dd can overlay the background colours of each. However, note that IE prior to IE9 doesn't support :nth-of-type so this won't work in current IE browsers. You'll need to add alternating classes to work around that. With those provisos, try something like this:

dl {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.6em;
    overflow: hidden;
    width: 300px;
    margin-right:-100px;
    }
dl dt {
    font-weight: bold;
    float: left;
    clear: left;
    padding-right: 34%;
    width: 32%;
    }

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: 66%;
    padding-left: 0%;
    margin-left: -66%;
    }

dl dt span {
    position:relative;
    z-index:1;
    display:block;
    }

dl dd span {
    margin-left: 50%;
    display:block;
    }

---

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

Answer 3

• display: table-cell; wouldn't work as there is no container for display: table-row; (and of course there is IE support quite ... nonexistent)

• display: inline-block; let you align vertically your content but backgrounds still have the height of your content, tall or not.

• If you know for sure what is the tallest element then you could use min-height

• If you know for sure that each dl will be taller than its dd (or the contrary), then there may be solutions (the shorter elements float while the others have a huge margin, thus creating 2 columns)

• Otherwise, progressive enhancement with JS is the road to go: by default without JS, your list has one background-color and with JS, you can obtain the height of each element and zebrify everything.

Answer 4

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>