In this post I'm going to show you how to style a definition list with CSS. More precisely, I'll show you how to create the visual effect of a definition list that looks like a table. To accomplish this, we don't necessarily need floats but only relative positioning. The final layout will also be compatible with Internet Explorer 6. First of all, bear in mind that the dd element (definition description) comes equipped with a default left margin that we need to reset. Here are our CSS styles:
dl {
margin: 0 auto;
padding: 2em 0;
font: 100% Arial, sans-serif;
width: 30em;
}
dt {
position: relative;
top: 1.5em;
width: 7em;
font-weight: bold;
padding: 0.5em;
background: #ffc;
border-radius: 8px;
border: 1px solid #999;
}
dd {
margin: 0 0 0 9em;
padding: 0 0 0 0.5em;
border-left: 1px solid #999;
}
Since the dt element (definition term) has been relatively positioned, its position doesn't affect the dd element. Further, our definition term has a stated width and our definition description has a left margin whose length is obviously greater than the width of the definition term. The final effect is that of two elements aligned on the same line, thus creating the effect of multiple rows.
This solution is cross-browser. You can see the final result in IE 6 below.
You can see the demo below.