CSS styling of definition lists

[shbakawy]

I have a list of title/values. I am thinking a definition list is the way to go. I want the title and definition to be on the same line, and I do not want the titles to have the same width of each other, but for each to have it's width based on the amount of text in the title. I also want the definitions to stay within their blocks, and not to bleed under the title. Lastly, I want it to work with IE7 and greater.Okay, I come up with the following HTML/CSS, and it almost works. I have a live example at http://jsfiddle.net/s45Kd/ since I couldn't figure out how to add CSS with the stackoverflow window (is it possible?). Two problems.First, how do I force definitions to break even if they do not have any white-space in them (i.e. "email")?Second, why do long definitions eventually bleed under the title (i.e. "some text")?While I would appreciate a "just do this", I am more looking for why this happens so I better understand.Thank you\[code\]<style type="text/css"> dl,dt,dd {padding:0;margin:0;} dl {width:200px;border:1px dashed black;} dt {float:left;font-weight:bolder; padding-right:5px; border:1px dashed red;} dd {border:1px dashed blue;}</style> <dl> <dt>First Name:</dt><dd>Bob</dd> <dt>Last Name:</dt><dd>Johnson</dd> <dt>Email:</dt><dd>[email protected]</dd> <dt>Phone Number:</dt><dd>(555) 555-1212</dd> <dt>Some Text:</dt><dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd> <dt>Birthday</dt><dd>January 1st</dd></dl>\[/code\]