*Neil Zanella* <nz******@cs.mun.ca>:
I am trying to format an HTML definition list with CSS so that it
appears as follows,
----------------------------------+
| gnat: any of various small |
| flies |
| |
| gnu: either of two large |
| African antelopes |
| hello |
| world: A standard greeting |
+---------------------------------+
dt { color: red; width: 140px; padding: 4px;
float: left; clear: left; }
dd { color: blue; width: 180px; padding: 4px;
text-align: left; overflow: auto; }
Why fixed pixel widths?
<table>
What's that one for?
I thought it must be possible with CSS floats, but it's not.
However, e.g.
dl {display: compact; line-height: 1.2em;}
dt, dd {border: 0.1em solid; margin: 0.2em 0; padding: 0.2em 2.25%;}
dt {color: red; width: 20%;}
dd {color: blue; width: 70%; margin-left: 25%;}
dt+dd {margin-top: -2.0em}
dd+dd {margin-top: 0}
should work for browsers that support the adjacent sibling selector '+'. If
it can be assured that there are never two adjacent dds, the last two
ruleset can be replaced by
dd {margin-top: -2.0em}
which also works in IE.
P.S.: This is what I came up with for floats before trying the simple
approach, including a dirty hack (dd.br):
dl {display: compact; clear: both;}
dt, dd {border: thin solid; margin: 0.5% 0; padding: 0.5% 2.25%;}
dt {color: red; width: 20%;}
dd {color: blue; width: 70%;}
/*
* 20% + 2·2.25% + 2·thin + 2·0 +
* + 70% + 2·2.25% + 2·thin + 2·0 * = 99% + 4·thin =< 100% ~>
* ~> thin =< 0.25% !
* (thin == 1px) ? dl@width >= 400px : decrease((dt,dd)@padding)
*/
/* To exclude IE use either this { */
dt+dt, dd+dt {float: left; clear: both;}
dt:first-child {float: left; clear: both;}
dt+dt { clear: left;}
*+dd {float: right; clear: right;}
dd:first-child {float: right; clear: right;}
/* } or this {*/
dt {float: left; clear: both;}
dt+dt {clear: left;}
dd {float: right; clear: right;}
* html dt, * html dd {float: none; clear: none;}
/* } */
dt+dt, dd+dd {margin: 0;}
dd:first-child {margin: 0;}
dd.br {clear: both; margin: 0; padding: 0; border-width: 0;}
<dt>gnu:</dt>
<dd>Either of two large African antelopes (Connochaetes gnou and C.
taurinus) with a head like that of an ox, short mane, long tail, and horns
in both sexes that curve downward and outward</dd>
<dd>Gnu's Not Unix</dd><dd class="br"></dd>
<dt>
--
"The most exciting phrase to hear in science,
the one that heralds new discoveries,
is not 'Eureka!' but 'That's funny...'"
Isaac Asimov
