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

Question 1

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

css html tabular

user17753 · Mar 8, 2012 · Viewed 15.6k times · Source

Answer

Answer

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.

Question 2

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.

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

Answer

Related questions