How do I fix my css floats on IE 6 & 7? Or how can I lay this out better?

I'm trying to lay out a task list I'm building and am having trouble laying out the开发者_运维知识库 individual tasks. The core layout consists of the task and patient name on the left, and the date created and overdue date on the right.

The problem starts when the content on the right overlaps the content on the left. On all browsers except IE 6 & 7 the content on the right simply falls below the content on the left, e.g.

Title    Date Created
Patient Name
         Date Overdue

On IE 6 & 7 both the content on the left and right squish up as if the other was taking up the full space necessary even though its not, e.g.

Title            Date
              Created
Patient          Date 
Name          Overdue   

Has anyone done a similar layout before and have tips on how they solved this? Is there a better way to lay this out NOT using floats? Do you hate IE like I do?

Currently I have the below HTML & CSS (which is laid out using SASS) or see this jsFiddle that demonstrates the issue.

<li class="task clear-fix">
  <span class="task-title">{title}</span>
  <span class="task-date secondary">{dateCreated}</span>
  <span class="patient-name">{patientName}</span>
  <span class="task-overdue-date">{dateOverdue}</span>
</li>

li.task {
    .task-title,
    .patient-name {
        clear: left;
        float: left;
    }
    .task-date,
    .task-overdue-date {
        clear: right;
        float: right;
    }
}
.clear-fix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clear-fix {
    *zoom: 1; /* IE 6 & 7 only */
}

Have you tried the following?

span {
    white-space: nowrap;
}

What about this?

HTML structure:

<ul>
  <li class="task">
    <div class="line">
      <span class="task-date">Date Created</span>
      <span class="task-title">Task Title</span>
    </div>
    <div class="line">
      <span class="task-due-date overdue">Date Overdue</span>
      <span class="patient-name">Patient Name</span>
    </div>
  </li>
</ul>

CSS:

.task {
  border: 1px solid red;
  min-height: 3em;
  width: 200px;
  padding: 0px;
}

.patient-name {
  font-weight: bold;
}

.task .task-date {
  float: right;
}

.line .task-due-date {
  float: right;
}

.task .overdue {
  color: red;
} 

This worked in your jsfiddle example.

<div class="task clear-fix">
    <div class="task-title">Title</span>
    <div class="task-date secondary">Date Created</div>
    <div class="patient-name">Patient Name</div>
    <div class="task-overdue-date">Date Overdue</div>
</div>

Also :before and :after dont work in ie 6 or ie 7. Instead create a clear div for compatibility.

<div class="task clear-fix">
        <div class="task-title">Title</span>
        <div class="task-date secondary">Date Created</div>
        <div class="patient-name">Patient Name</div>
        <div class="task-overdue-date">Date Overdue</div>
    </div>    
<div class="clear"></div>

.clear
{
    clear: both;
}