W3C home > Mailing lists > Public > whatwg@whatwg.org > March 2012

[whatwg] <di>? Please?

From: Nils Dagsson Moskopp <nils@dieweltistgarnichtso.net>
Date: Mon, 5 Mar 2012 04:41:06 +0100
Message-ID: <20120305044106.10d38704@desudesudesu>
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 &lt;dl&gt; 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>
Received on Sunday, 4 March 2012 19:41:06 UTC

This archive was generated by hypermail 2.4.0 : Wednesday, 22 January 2020 16:59:40 UTC