Question

I’m trying to avoid pushdown of left floating DDs in a DL when containing more text than can it fit in one line.

Example here:
http://jsfiddle.net/hw2wM/7/
The two first DDs are aligned. However the third one should stay aligned with the first two DDs but instead it is pushed down and takes the entire width…

Features I would like to keep:

• When the DT text is too wide, the DD is gracefully pushed to the right.
• No fixed width
• Stays aligned with an empty DD
• Two DLs displayed side by side

Answer 1

Final answer, hope it saves someone time…

Most flexible answer.
http://jsfiddle.net/SeYzF/1/

Thanks @Abody97 for showing the lead.

Main features, on top of Abody97 suggestions:

dd:after {content:' '; white-space:pre;}

to keep dd to misalign if empty

div.table {
display: table;
width: 100%;
}
div.table > * {
display: table-cell;
}

to display two DLs side by side