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

Question

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.

Semantic purposes, the mark-up represents a list of terms and definitions; not tabular data. I want to separate semantics of mark-up from style. To my knowledge that is the purpose of the `dl` element and of CSS. — user17753, Mar 08 '12 at 14:36
Tables aren't inherently evil, to be avoided at all costs. They're good for displaying, surprise, tabular data - and it does look like it would apply in this case. — chris, Mar 08 '12 at 14:38
As I stated, "the mark-up represents a list of terms and definitions; not tabular data." Anyways, this is not an answer, it is a question. I answered the question as to why I do not use a table, with a clear and reasonable answer. — user17753, Mar 08 '12 at 14:44
Add a width attribute to your dt element then: .terms dt { width:180px; text-align:left; border: solid blue 1px; clear: left; } — zgood, Mar 08 '12 at 15:03

Marat Tanalin · Answer 1 · 2018-03-19T13:28:41.283

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.

score 3 · Answer 2 · answered Jun 13 '12 at 23:13

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.

score 2 · Accepted Answer · answered Mar 08 '12 at 15:19

2

you could just specify fixed width:XXpx for each of the elements like this

http://jsfiddle.net/XKaKT/1/

answered Mar 08 '12 at 15:19

Evert

8,161
1
15
17

I take it, there's no way to do this without fixed widths? – user17753 Mar 20 '12 at 20:57
any variable width would mean that your columns would no longer line up vertically, as they could stretch individually, but you could use percentage widths like this if that makes it more usable: http://jsfiddle.net/XKaKT/2/ – Evert Mar 20 '12 at 23:34

score 1 · Answer 4 · answered Mar 08 '12 at 15:09

1

For your window resizing issue just add a width to the ".terms" div:

.terms{
   width:1000px;
 }

answered Mar 08 '12 at 15:09

zgood

12,181
2
25
26

I take it, there's no way to do this without fixed widths? – user17753 Mar 20 '12 at 20:57

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

4 Answers4