CSS tip: styling definition list pairs
This might be more common knowledge than I realize, but the last time it came up on the CSS-discuss list, the results were inconclusive. I’ve been trying for some time now to style name-value pairs using definition list markup, with the two parts of the pair arranged next to each other. This is mainly for product information markup on the Fisher-Price site. I have been hacking around the problem for months, unable to get around IE’s inability to float and clear something at the same time. I hit upon an inline-block solution, until it blew up in Safari. Finally, I found the solution. I had been hung up on trying to float both parts and clear each dt. Turns out the trick is not floating the dd at all.
Given markup like the following:
<dt>Price:</dt> <dd>$10.00</dd> <dt>Ages:</dt> <dd>3 - 6 months</dt>
Simply write the following CSS:
dt {
float: left;
clear: both;
position: relative;
padding: 0 .5em 0 .3em;
}
dd {
float: none;
position: relative;
}
Simple. Really simple. But hey, it might be helpful. You can see it in all its glory at Fun 2 Learn, a new Fisher-Price brand site.
