CODEWITHSUNDEEP
htmlcss
Jon
Jon

Reputation: 3

How do I get text to display on top instead of on the side?

I have a definition list and I would like the text description to stay above the textbox. The text however is to the left of the box. Here is the html.

<dl>
  <dt>
    <label>Phone Number</label>
  </dt>
  <dd>
    <input name="phone" type="text"/>
  </dd>
</dl>

Here is the css.

dl {font:normal 12px/15px Arial; position: relative; width: 350px;}
dt {clear: both; float:left; width: 130px; padding: 4px 0 2px 0; text-align: left;}
dd {float: left; width: 200px; margin: 0 0 8px 0; padding-left: 6px;}

Upvotes: 0

Views: 80

Answers (2)

&#193;lvaro Gonz&#225;lez
&#193;lvaro Gonz&#225;lez

Reputation: 146370

Remove all the float:left; rules. What you describe is the default behaviour.

Upvotes: 1

Edelcom
Edelcom

Reputation: 5058

Try adding Display:block to the dt and dd definitions (haven't tested this, just a thought).

Upvotes: 0

Related Questions