0

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:

<dl> 
<dt class="position">Position Name 1</dt>
<dd class="side-time clearfix">
    <time datetime="2010-08-01" class="start">August 2010</time><span class="end">Present</span>
</dd>
<dd class="organization first">Organization Name</dd>
<dd>Location, USA</dd>
<dd class="additional">
    <ul>
        <li>Described task 1</li>
        <li>Described tesk 2</li>
    </ul>
</dd> <dt class="position">Position Name 2</dt>

<dd class="side-time clearfix">
    <time datetime="2010-08-01" class="start">August 2010</time><span class="end">Present</span>
</dd>
<dd class="organization first">Organization Name</dd>
<dd>Location, USA</dd>
<dd class="additional">
    <ul>
        <li>Described task 1</li>
        <li>Described tesk 2</li>
    </ul>
</dd> <dt class="position">Position Name 3</dt>

<dd class="side-time clearfix">
    <time datetime="2010-08-01" class="start">August 2010</time><span class="end">Present</span>
</dd>
<dd class="organization first">Organization Name</dd>
<dd>Location, USA</dd>
<dd class="additional">
    <ul>
        <li>Described task 1</li>
        <li>Described tesk 2</li>
    </ul>
</dd>

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!

1
  • 1
    Remove that margin from the top of the dt. It's pushing it down into the second line. Add clear:both to the location dd to keep it on a new line below the floats.
    – js1568
    Apr 8, 2013 at 20:58

1 Answer 1

1
dd {
    clear:both;
}

dt + dd{
    clear: none;   
}

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

2
  • This seems to work except that I would like the time/date to align left when it's moved to a new line because the screen width decrease. Any way to do this without a media query?
    – Will M
    Apr 8, 2013 at 21:42
  • Not that I can think of without javascript. Apr 8, 2013 at 22:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.