Laying DT for the float to the left of DD

Question

I am trying to create a list of definitions so that each dt floats to the left of the corresponding dd elements. I used:

 dt { clear: both; float: left; width: 6em; } dd { margin-left: 6.5em; } 

which works as much as possible. It perfectly handles several dd elements for dt and dd text, which is long enough to span multiple lines.

However, I would really like to deal with a few dt elements on dd (which are valid HTML) and dt elements that are higher than the corresponding dd elements (due to the length of the text causing the line wrapping). At this point, the style falls apart, and subsequent dd elements go beyond the line with their dt .

I tried different things like float dd , which breaks the alignment of multiple dd elements. Add dd + dd { clear: both; } dd + dd { clear: both; } , which almost works, but now the long text dd is under its dt (not to mention the old browsers that do not follow the rule).

Has anyone been able to do this? I really do not want to give up and use the table, but perhaps this is appropriate.

My test markup is here: http://pastebin.com/nmAQ5Xdm

Answer 1

I figured out a way to do this if you don't mind limiting the width of the dl element:

 dl { max-width: 30em; overflow: hidden; } dt, dd { margin-top: 0.5em; } dt { clear: both; float: left; width: 6em; } dd { float: right; margin-left: 0.5em; width: 22.5em; } 

This is not ideal when the style is broken if the viewport is too narrow for dl .

Answer 2

This works for me. Set the width to dt and place it to the left. Then leave dd as display: block (default) and give it margin-left of the same amount. Now dd will wrap with the same width as dt. Swimming your dt will automatically clear block dd. You can adjust the distance between the dt / dd pair by adjusting the margin-bottom dd.

If you can have empty dds, you can add clear: both and margin-bottom to your dt so that it appears in the right place without the contents of dd to put it there.

 dt { float: left; width: 8em; clear: both; margin-bottom: 1em; } dd { margin-left: 8em; } dd { margin-bottom: 1em; }