Home/ Questions/Q 8933151
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T09:28:19+00:00

I would like to show several rows of data which each have a title

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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).

    • 0