How to style dt and dd so they are on the same line?

Question

Using CSS, how can I style the following:

    
Mercury
    
Mercury (0.4 AU from the Sun) is the closest planet to th         


        

Answer 1

See jsFiddle demo

I needed a list exactly as described for a project that showed employees at a company, with their photo on the left, and information on the right. I managed to accomplish the clearing by using psuedo-elements after every DD:

.myList dd:after {
  content: '';
  display: table;
  clear: both;
}

In addition, I wanted the text to only display to the right of the image, without wrapping under the floated image (pseudo-column effect). This can be accomplished by adding a DIV element with the CSS overflow: hidden; around the content of the DD tag. You can omit this extra DIV, but the content of the DD tag will wrap under the floated DT.

After playing with it a while, I was able to support multiple DT elements per DD, but not multiple DD elements per DT. I tried adding another optional class to clear only after the last DD, but subsequent DD elements wrapped under the DT elements (not my desired effect… I wanted the DT and DD elements to form columns, and the extra DD elements were too wide).

By all rights, this should only work in IE8+, but due to a quirk in IE7 it works there as well.