Showing definition list with DT and DD on same row

Question

I would like to show several rows of data which each have a title and some data on the same row. This question has definitely been answered on SO (i.e. How to style dt and dd so they are on the same line?), however, it doesn't seem to work for me. The following seems to work, except when a DD has not content in which a fixes it. I am interested it IE7+. Is how I am doing this correct? Thanks

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title>Untitled</title>
        <style>
            dl {width: 395px; font-size:12px}
            dd,dt  {padding-top:5px;padding-bottom:5px;}
            dt {float:left; padding-right: 5px; font-weight: bolder;}
            /* dd {padding-left: 5px;} Does not work */
        </style>

    </head>
    <body>
        <dl>
            <dt>DT Element 1:</dt><dd>DD Elem 1</dd>
            <dt>DT Second Element:</dt><dd>DD Element Two</dd>
            <dt>DT Elem 3:</dt><dd></dd>
            <dt>DT Element 4:</dt><dd>DD Elem 4</dd>
            <dt>DT Fifth Element:</dt><dd>&nbsp;</dd>
            <dt>DT Elem 6:</dt><dd>DD Element Six</dd>
        </dl>  
    </body>
</html>

possible duplicate of [How to style dt and dd so they are on the same line?](http://stackoverflow.com/questions/1713048/how-to-style-dt-and-dd-so-they-are-on-the-same-line) — Jukka K. Korpela, Dec 04 '12 at 17:45
If you know that your question is an exact duplicate of an existing question, you should not open a new question but, if needed, ask for clarifications to the answers. — Jukka K. Korpela, Dec 04 '12 at 17:46
Jukka is right. Float both the dt, dd, and give the dt a set width. — Dawson, Dec 04 '12 at 17:47
As I showed, each of my DTs have different amount of characters. Giving the dt a set width would require a separate CSS declaration for each which is specific to the data contained. — user1032531, Dec 04 '12 at 17:51

score 6 · Accepted Answer · answered Dec 04 '12 at 19:10

6

Your problem is that an empty dd is not generated and leaves an empty space (height:0px).

If you can, yes, simply put a nbsp; inside any empty element. It's the simplest solution that will work cross-browser.

A simple, pure css fix would be like this :

dd:after {content:"."}

But it adds a dot after each definition...

You can also simply set a min-height on your dd :

dt {clear: left;}
dt, dd {min-height:1.5em;}

(dt and dd min-height needs to be the same!)

demo

...You'll probably run into issue if your dt height is not regular (if it's sometime on 2 lines for example).

answered Dec 04 '12 at 19:10

Kraz

6,910
6
42
70

Thanks Kraz, Ah, no height. Now it makes sense. Using CSS to add content seems a little odd to me. Your min-height solution seems to work well. May I ask why you included `dt {clear: left;}`? – user1032531 Dec 04 '12 at 20:40
1

it's for the case where `dt` height is greater than the `dd` height. You might not need it. In fact, I've [improved my solution](http://jsfiddle.net/7MKQf/1/) by floating both element and clearing the first one. No fixed width and both element height can be different. Just __remember to clear your 'dl'__! (or you'll probably have some issue.) – Kraz Dec 04 '12 at 22:37
And the content part doesn't work with ie7 if I recall correctly. – Kraz Dec 04 '12 at 22:37
Thanks again. By the way, your latest solution doesn't work with IE7, however, your first does. – user1032531 Dec 05 '12 at 12:37
@Kraz You should update your answer to include the version that floats both elements left and does away with the min-height as that is a much better solution than the first two. – Justin Jul 01 '14 at 23:19
@Justin if you provide a functionnal demo, sure, I'll add it. – Kraz Jul 02 '14 at 13:25

score 0 · Answer 2 · answered Jul 02 '14 at 17:09

This works on IE7+, is standards compliant, and allows differing heights.

<style>
dt {
    float: left;
    clear: left;
    width: 100px;        
    padding: 5px 0;
    margin:0;
}
dd {
    float: left;
    width: 200px;
    padding: 5px 0;
    margin:0;
}
.cf:after {
    content:'';
    display:table;
    clear:both;
}
</style>

<dl class="cf">
    <dt>A</dt>
    <dd>Apple</dd>
    <dt>B</dt>
    <dd>Banana<br>Bread<br>Bun</dd>
    <dt>C</dt>
    <dd>Cinnamon</dd>
</dl>

See the JSFiddle.

Showing definition list with DT and DD on same row

2 Answers2

Linked