Question

I would like to display day, month and year in form using dl, dt and dd.

I would like this to present like this :

BIRTHDAY

    day month year
    in1 in2   in3

Where in* is the input of given type, it shouldnt matter.

How should the css should look like to accomplish this?

My current code is:

<dl>
  <dt>day</dt>
  <dd>myInput<dd>

  <dt>month</dt>
  <dd>myInput2</dd>

  <dt>year</dt>
  <dd>myInput3</dd>
</dl>

Answer 1

You’re in the need of a table, not definition lists (<dl> tag pairs). People constantly neglect using tables, even though they are completely appropriate (and originally made) for the job.

The HTML:

<div class="birthday">
    <span class="title">Birthday</span>

    <table>
        <th>
            <td>Day</td> <td>Month</td> <td>Year</td>
        </th>

        <tr>
            <td>25</td> <td>1</td> <td>1902</td>
        </tr>
    </table>
</div>

The CSS:

.birthday
{
    padding-left: 30px;
}

.birthday .title
{
    display: inline-block;
    font-size: 20px;

    margin-left: -30px;
    margin-bottom: 20px;
}

.birthday table tr td
{
    min-width: 50px;
}

Live Demo: http://jsfiddle.net/Blender/5rhLd/