CODEWITHSUNDEEP
htmlcsscss-float
Joshua Muheim
Joshua Muheim

Reputation: 13195

How to align a HTML definition list (<dl>) horizontally without limiting term or definition in height?

I'm trying to align a HTML defintion list horizontally, so the term is on the left, and the definition is on the right.

Both term and definition can be very long, so they can be wider than the available width and will wrap.

With my CSS, I have no problem with definitions that wrap and so are higher than the corresponding term. But in the rare case when the term wraps and is higher than the corresponding definition, I don't get the following definition to clear properly.

You can see this in my jsFiddle, where the definition "555" does not properly align with the term "555".

http://jsfiddle.net/jmuheim/kjf8f/

Any help on how to fix this is really appreciated. Requirements:

Upvotes: 1

Views: 5173

Answers (2)

RwwL
RwwL

Reputation: 3308

I really like Marc's answer. Another solution, if it doesn't wreck your design requirements, is probably to float the DDs as well, and give both the DDs and DTs (and horizontal margins) percentage based widths instead of fixed-pixel widths: http://jsfiddle.net/dHRSz/1/

Or consider that, depending on the content, a table (with the terms wrapped in <th scope="row">) might not be too inappropriate to mark this up.

Edit - copied CSS from jsfiddle:

body {
    padding: 0;
    margin: 0;
}

.block {
    overflow: hidden;
    margin: 20px 0;
}

dl {
    margin: 10px 0;
}

dt {
    margin: 0 0 4px 0;
    float: left;
    clear: left;
    width: 28%;
}

dd {
    float: left;
    width: 71%;
    margin: 0 0 4px 1%;
}

Upvotes: 2

Marc Audet
Marc Audet

Reputation: 46785

This might do the trick. Add the following CSS rule:

dd:after {
    content: '';
    display: block;
    clear: both;
}

The pseudo-element will clear the floated <dd> element and this will ensure that the next <dt> starts on a new line.

See demo: http://jsfiddle.net/audetwebdesign/TXYGk/

Upvotes: 6

Related Questions