arkitrave :: log

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&lt/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.