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

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;}