If you float the dt’s left, and simply give the dd’s a left margin equal to a hair more than the width of the dt’s, then your dd’s (descriptions) can be several lines long.
Dt’s have to clear floats above them.
If there’s a dt and the associated dd is empty, you must put some kind of content inside it. We use a space character (& #160; ). Otherwise the next dd in line will happily ride up and things won’t align properly.
Or, if you don’t like DL’s (some people would argue they really must be restricted to actual dictionary definitions, even though the W3C never demanded such a thing), you could possibly get away with
sets (div’s really optional anyway, but I dunno if your info every gets really weird. If it’s really always the sort of lengths like you posted, div not needed).
h? is floated left and set width like the dt solution, while p is at least given a left margin equal to width of dt.
One thing to watch out for in both of these possible solutions is, the thing on the right (p or dd) if you’re giving it a margin, also giving it something that triggers Haslayout (such as setting dimensions) will make IE give you radically different results. You could float the p/dd’s left or right instead of using a margin for cross-browser consistency, but if this info stays pretty simple then you can get away with setting no dimensions on the right-side thing.
I definitely would NOT use two divs, one with all the left-hand stuff and the second with all the right hand stuff, and both floated. You certainly want the source order of the text to make sense whether CSS is applied or not. (just in case someone suggests this)
Just for interest I put my inline block version online here as I think its’ quite neat and not somethig that floats can do. It won’t work in FF2 or equivalent though unless the mark up is change a lot. Works in IE6+ and all other modern browsers.
I personally don’t consider tables when they are just two columns most of the time, but it’s certainly a grey area and using a table here certainly wouldn’t be a layout table (the rows’ TDs certainly have a semantic relationship with each other).
If you do use a table, though, I’d have the left-hand-stuff be th’s rather than td’s, since they are “heading” the information on the right. This would also make the information make a little more sense in a screen reader.