Align `dt` and` dd` on the last line

Question

I have this html:

<dl> <dt>some text</dt> <dd>12.45</dd> <dt>some larger text</dt> <dd>46.05</dd> <dt>some even larger text</dt> <dd>46.05</dd> <div style="clear:both;"></div> </dl> 

... and this CSS:

 dl { width: 120px; } dt { float: left; clear: both; } dd { float: right; } 

And this created it (I added some non-essential additional styles to show what was going on):

The problem is that the last dd does not match the last dt . How to make a number match the last line of text? (second dt / dd ok)

Here is jsfiddle with my fix.

EDIT . To be perfectly clear, this is what I want:

Answer 1

Brief moan

A flexible approach to this is the well-known gap in CSS for 15 years. That would have been resolved, but for the 15-year-old Firefox bug related to CSS 2, and perhaps it was possible if the tab-stops specification, proposed 17 years ago, ever went underground. If you're interested, check out the updates below.

Limited solution

I found several different ways to do this without changing the markup using pseudo-elements. They all have significant flaws, but if you can reliably set the maximum width for dd text, this is probably the best way:

 dl { line-height: 1.3em; overflow: auto; width: 140px; } dt { float: left; width: 100%; } dd { float: right; margin-top: -1.3em; /* ie minus line-height */ } dt:after{ content: ''; display: inline-block; width: 3.5em; /* Max width of a dd element */ } 

Example: http://jsfiddle.net/Jordan/p4mMa/3/

Here the :after pseudo-element takes up additional space in each dt , forcing it to break into a new line if there is not enough space for the dd element to fit at the end of the current one. (You will also need to reset your margins and padding on the elements, I left this for brevity.)

Alternatives

Other approaches that I considered included display: inline in dt and using the :before pseudo-element with display: block to break the line ( WebKit doesn't like it ) and the same approach, but using display: inline-block and width: 100% for the convenience of WebKit browsers (it works, but you have an indelible blank line before each dt ).

It should be noted that IE7 and IE8 are absent because they do not support pseudo-elements. If you want to progress, simply remove the negative marker in the dd element in the conditional stylesheet, and prices will always be displayed on a separate line in these browsers.

---

UPDATE (2013-04-18): I know this is an old answer, but a recent conversation on Twitter reminded me of something that I think is worth mentioning. Another way to do this, which does not require determining the width for dd : a little-known display: run-in , in fact, allows you to consider a block-level element as the inline content of your next brother. The only trade-off is to port your dd content using span; it’s also a relatively elegant solution that works in most modern browsers - and even in IE8!

Problem? A 15-year-old Firefox bug filed on Christmas Eve 1998 and is unlikely to be addressed any time soon.

This is understandable: the run-in fields are "terribly underspecified" , there are not many use cases, and there are more important / useful things to work on. Nevertheless, it seems that he slipped through the cracks to some extent, and I cannot help but wonder if more people will use it with reliable support.

---

UPDATE (2013-11-13): This exact usage example was described in a list of suggested CSS extensions published by W3C in December 1998. Also, back in January 1997, Dave Raggett created a proposal for the tab-stops property , which would work just fine here. Unfortunately, neither the precedent, nor the proposal received a large load.

Answer 2

Your problem will not be a problem if you don't mind switching to ul / li / span :

http://jsbin.com/acunew/3/edit#html,live

 <ul> <li>some text <span>12.45</span></li> <li>some larger text <span>46.05</span></li> <li>some even larger text <span>46.05</span></li> </ul> 

The new HTML is not quite as semantic as yours, but I think it's good.

CSS is pretty much the same:

 ul { width: 120px; padding: 0; list-style: none; overflow: hidden; } li { clear: both; } span { float: right; } 

Answer 3

I think Zuazua is on the right track. I would add some javascript to determine how long the dt has a width of more than 120 pixels. Then I would apply the Zuazua class to my sibling dd. Of course, I would change the name of the class to better suit your needs.

Answer 4

I think j08691 was very close to the answer, you just need to use relative position and negative margin.

http://jsfiddle.net/3UyKG/