Reputation: 3161

Styling dl and dt with CSS to mimic table-like presentation

I have the following issues using CSS to style some dl and dt elements. I prefer always to use very basic CSS that is compatible with IE6/IE7 and modern browsers. I am trying to get an effect, that to me should be rather simple to achieve.

Here's a stripped down version of the initial source code I am working with, to try and work on just this issue:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>

        <style type="text/css">

        .terms dl {
            float: left;
            padding-left: 0px;  
        }

        .terms dt, .terms dd {
            text-align: center;
            margin: 0px;
            float: left;
        }

        .terms dt {

            border: solid blue 1px;
            clear: left;    
        }

        .terms dd {
            border: solid red 1px;
            margin-right: 40px;
            margin-left: 40px;
        }

        </style>
    </head>
    <body>
        <div class="terms">
            <h1>Terms</h1>
            <dl>
                <dt>Term 1:</dt>
                <dd>Very Long definition for this term here</dd>

                <dt>Term 2:</dt>
                <dd>Definition for term</dd>

                <dt>Term 3 with longer term title:</dt>
                <dd>Definition for term</dd>

                <dt>Term 4:</dt>
                <dd>Definition for term</dd>

                <dt>Term 5:</dt>
                <dd>Definition for term</dd>

                <dt>Term 6:</dt>
                <dd>Definition for term</dd>
            </dl>
            <dl>
                <dt>Term 7:</dt>
                <dd>Defintion for term</dd>

                <dt>Term 8:</dt>
                <dd>Definition for term</dd>

                <dt>Term 9:</dt>
                <dd>Definition for term</dd>

                <dt>Term 10:</dt>
                <dd>Very Long definition for this term here</dd>

                <dt>Term 11:</dt>
                <dd>Definition for term</dd>

                <dt>Term 12:</dt>
                <dd>Definition for term</dd>
            </dl>
        </div>
    </body>
</html>

Here is the visual result. I styled blue and red borders so that it is more easily visualized:

enter image description here

My goal is to have all the blue and red "boxes" to have the same width no matter what the text-size set is. E.g. if a user has a default style sheet to make their text very large, it should expand accordingly. This issue does not only arise when people use their own style sheet, it also arises in IE6 when people select "text-size" other than "medium" -- it makes the text larger, and I want to be able to accommodate that.

I don't think I want to have to set a hard width on any of the "boxes", and I don't want any wrapping of text, or having the floats fall down, out of this two column style.

I can edit the answer with more pictures and examples if I wasn't clear enough.

Also, this is a related, but separate question. If the browser window is re-sized, with a table you'd expect a portion of the table to become no longer visible as you decrease the width. With this setup, you get a very strange and ugly result as seen below. How can this be avoided?

enter image description here

UPDATE

It seems there isn't a solution that does not involve giving fixed width's to the elements (and/or an encapsulating element). In addition, it seems IE6 text-resizing can only be resolved by hard setting your text to a pixel size and just not letting them re-size it.

Upvotes: 11

Answers (4)

Marat Tanalin

Reputation: 14123

A DL list and a properly marked-up two-column table are actually pretty equivalent as to semantics. So you can safely use tables here (note the TH elements with the scope attributes):

<table>
    <tr>
        <th scope="row">Term 1:</th>
        <td>Very Long definition for this term here<td>
    </tr>
    <tr>
        <th scope="row">Term 2:</th>
        <td>Definition for term<td>
    </tr>
    <tr>
        <th scope="row">Term 3 with longer term title:</th>
        <td>Definition for term<td>
    </tr>
    <!-- ... -->
</table>

If using DL is preferred, consider using an unordered list with each item containing a separate DL with exactly one DT/DD group inside. See also my answer to the “Is there a valid way to wrap a dt and a dd with an HTML element?” question.

Upvotes: 8

Señor Jefe

Reputation: 131

Had a similar problem and here's a solution, but it largely depends on every DT-DD pair fitting on just 1 line, so it may fragile for your purposes:

The general strategy here is you want the DL to be an inline-block and the DTs to be blocks so they automatically have the same width. This also allows you to right-align all the DTs if that suits your styling, and you control the spacing between elements from the DT.

dl {
  line-height: 2;
  display: inline-block;
  position: relative;
}

dt {
  text-align: right;
  margin-right: 1em;
}

Now you need to position the DDs to the right of the DTs, which is what makes this fragile, because the DDs cannot adapt well to varying content.

dd {
  position: absolute;
  left: 100%;
  margin-top: -2em; /* negate the DL line-height */
  white-space: nowrap; /* without this, DDs will be the same length as DTs
}

Note that setting width restrictions on the DL will drive your DTs, and your DDs are sized based on your DTs.

Upvotes: 3