dt (float left) and first dd (float right) on the same line

Question

I am using a definition list to define sections of a resume.

I would like to have each dt and its first dd to show on the same line. The dt should be on the left, and the dd on the right. I would like the remaining dds for each dt to show below the dt.

I also need this to be responsive, so as the screen width decreases the first dd goes to the next line.

Right now, I can't seem to get the floats to clear at the right point.

Any ideas?

Here's my code: http://jsfiddle.net/WgkZp/

HTML:

 
Position Name 1

    August 2010Present

Organization Name
Location, USA

    
        Described task 1
        Described tesk 2
    
 Position Name 2


    August 2010Present

Organization Name
Location, USA

    
        Described task 1
        Described tesk 2
    
 Position Name 3


    August 2010Present

Organization Name
Location, USA

    
        Described task 1
        Described tesk 2

CSS:

dl {
  margin: 0 0 0 20px;
  overflow: hidden;
}

dt {
  margin-top: 10px;
  float: left;
}

dt.first {
  margin: 0;
}

dd {
  margin: 0;
  padding: 0;
}

dd ul {
  margin-bottom: 0;
}

dd time, dd .end {
  font-style: italic;
}

dd time.start:after {
  content:'\2013';
}

dd.side-time {
  float: right;
}

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  line-height: 0;
}

.clearfix:after {
  clear: both;
}

Thanks!

James Montagne · Accepted Answer

dd {
    clear:both;
}

dt + dd{
    clear: none;   
}

http://jsfiddle.net/WgkZp/1/

dt (float left) and first dd (float right) on the same line

Answers (1)

Related Questions