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?