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

Depending on how you style the dt and dd elements, you might encounter a problem: making them have the same height. For instance, if you want to but some visible border at the bottom of those elements, you most probably want to display the border at the same height, like in a table.

One solution for this is cheating and make each row a "dl" element. (this is equivalent to using tr in a table) We loose the original interest of definition lists, but on the counterpart this is an easy manner to get pseudo-tables that are quickly and pretty styled.

THE CSS:

dl {
 margin:0;
 padding:0;
 clear:both;
 overflow:hidden;
}
dt {
 margin:0;
 padding:0;
 float:left;
 width:28%;
 list-style-type:bullet;
}
dd {
 margin:0;
 padding:0;
 float:right;
 width:72%;
}

.huitCinqPts dl dt, .huitCinqPts dl dd {font-size:11.3px;}
.bord_inf_gc dl {padding-top:0.23em;padding-bottom:0.5em;border-bottom:1px solid #aaa;}

THE HTML:

  
Term1
Definition1
  
Term2
Definition2