CODEWITHSUNDEEP
htmlcss
insertusernamehere
insertusernamehere

Reputation: 23580

Styling a Definition List (<dl>) with floating child elements

There's a defintion list where a key-value-pair is supposed to be on one line. The definition starts right after the term, so the <dt>s do not have a fixed width. This actually works fine, using floating elements and I get some' like this:

Value: Definition 1

Value: Definition 2

Value: Definition 3

The problem is, that the <dd>-element can get long and then it results in this:

Value: Definition 1

Value:

Defintion 2 is very very long.

Value: Definition 3

But I want to get this actually:

Value: Definition 1

Value: Defintion 2

is very very long.

Value: Definition 3

I can't get my head around it. Maybe somebody has an idea.

Here's a demo on jsfiddle.net and here the source:

HTML

<dl>
    <dt>Value 1:</dt>
    <dd>Defintiion 1</dd>
    
    <dt>V 2:</dt>
    <dd>Defintiion 2</dd>
    
    <dt>Value 3</dt>
    <dd>Defintiion 3 is pretty long. So it breaks into a new line.</dd>
    
    <dt>This length is not defined:</dt>
    <dd>Defintiion 4</dd>
    
    <dt>Last</dt>
    <dd>Defintiion 5</dd>
</dl>​

CSS

dl {
    width: 200px;
    border: 1px solid red;
}

dl > dt {
    display: block;
    float: left;
    clear: both;
    margin: 0;
    padding: 0 5px 0 0;
    font-weight: bold;
}

dl > dd {
    display: block;
    float: left;
    margin: 0;
    padding: 0;
}​

Upvotes: 3

Views: 3198

Answers (2)

pbaehr
pbaehr

Reputation: 631

You can use display: inline to accomplish what you're looking for:

http://jsfiddle.net/unPdd/

Upvotes: 2

alestanis
alestanis

Reputation: 21863

Definition lists work loke arrays: your title is one cell and your definition is in another cell. This is why your whole definition moves to the following line when it's too long.

The behaviour you are looking for looks more like a normal list where each title is written in bold letters.

Upvotes: 0

Related Questions