[whatwg] <di>? Please?

Sun Mar 4 19:41:06 PST 2012

Hugh Guiney <hugh.guiney at gmail.com> schrieb am Tue, 10 Jan 2012
02:32:35 -0500:

> […] my most common problem with <dl>s is styling them, but it's
> hardly CSS's fault. What kind of styling am I attempting to do?
> Mostly, to arrange them in columns.
>
> […]
> 
> I've tried, and as far as I can tell, this can't be achieved with
> floats. Even if it can, it's prohibitively unintuitive enough to
> someone with considerable CSS experience.  

FYI, you can abuse relative positioning and negative margins for this
purpose. Two caveats: First, you'll have to know the number of columns
beforehand. Second, particularly long <dt> content that has two lines
can and will mess this up. Still, I consider it pretty straightforward:

<!DOCTYPE html>
<title>Styling <dl> elements as columns</title>

<style>
    * { margin: 0; padding: 0; }
    body { margin: 3em auto; line-height: 1.5em; width: 34em; }
    dl { outline: 1px solid blue; }
    dt, dd { float: left; width: 25%; }
    dt { outline: 1px dotted red; }
    dd { outline: 1px dotted green; position: relative;
        margin-left: -25%; top: 1.5em; }
</style>

<dl>
    <dt>item
    <dd>definition
    <dt>another item
    <dd>another definition
    <dt>yet another item
    <dd>yet another definition
    <dt>the last item
    <dd>the last definition
</dl>

Cheers,
-- 
Nils Dagsson Moskopp // erlehmann
<http://dieweltistgarnichtso.net>