La solució —que originalment vaig veure a l'artícle Manipulating Definition Lists for Fun and Profit— seria la següent:

Primer cal flotar els dt i els dd de manera que quedaran tal com la figura 1.

dt { 
   float:left;
   background: url(fonsDT.png) no-repeat left top;
   margin: 0;
   padding: 10px;
}
dd {
   float:left;
   background: url(fonsDD.gif) no-repeat left bottom;
}

Usant un marge esquerre negatiu pel dd igual a l'amplada del dt i un marge superior igual a l'alçada del dt el dd quedarà posicionat just a sota del dt.

dd {
   float:left;
   background: url(fonsDD.gif) no-repeat left bottom;	
   padding: 1px 10px 10px;
   margin: 90px 0 40px -260px;
}

Per últim caldrà fer la caixa del dd més gran que la del dt tal i com il·lustra la figura 2 per tal d'obligar els dt a no envaïr l'espai dels dd.

Compte amb el model de caixa. L'amplada del dt és 260 ja que width: 240px i el padding: 10px és a dir, 10px pel padding-left i 10px pel padding-right.

dt { 
   float:left;
   background: url(fonsDT.png) no-repeat left top;
   width:240px;
   height:70px;
   margin: 0;
   padding: 10px;
}
dd {
   float:left;
   background: url(fonsDD.gif) no-repeat left bottom;
   width: 241px;
   height: 70px;
   padding: 1px 10px 10px;
   margin: 90px 0 40px -260px;
}

Amb les imatges de fons es perfilarà la caixa fen-les de tal manera que coincideixin