Side-by-side elements *with variable content* without using tables

This is similar to a question I've asked previously, but with a twist.

I have some content that I'd like to represent semantically in HTML as a list. Each entry in this list has variable content on the left hand side and variable content on the right-hand side. This jsfiddle represents an example of my efforts so far, but you can see that depending on the width of the window and the amount of text on the left-hand side, some of the 开发者_StackOverflowcontent can bleed through to the next line.

Here are my requirements:

1. The width of the whole list must be able to resize to fit the width of its container.
2. The width of the left-hand "cells" should be the same. I am willing to make it fixed, but a percentage of the width is preferable.
3. Each row needs to resize itself to fit the height of the items in whichever of the two "cells" is tallest.

Do I need to just bite the bullet and make this a table, or is there some HTML/CSS guru out there that can show me how this is done?

---

Name/Date (aside) comes before the paragraph in this version, but it allows for a percentage width on the aside. It can also be resized to virtually any size without any rendering issues (unless the width of a column is less than the longest word, in which case you probably have a much bigger issue to deal with).

The CSS:

<style>

/* HTML Block Elements - For Older Browsers */
article,
aside,
footer,
header,
nav,
section {
 display:block;
}

/* Basic Structure - DONT EDIT */
.transaction-history-list li {
 overflow:hidden;
}
.transaction-history-list li > aside {
 float:left;
 /* Uncomment for equal height (background)
    Buggy in IE7
  padding-bottom:10000px;
  margin-bottom:-10000px;
 */
 overflow:hidden;
}
.transaction-history-list li > div {
 /* Uncomment for equal height (background)
    Buggy in IE7
  padding-bottom:10000px;
  margin-bottom:-10000px;
 */
 overflow:hidden;
}


/* Width of Aside */
.transaction-history-list li > aside {
 width:20%; /* Width of aside */
}
.transaction-history-list li > div {
 margin-left:20%; /* Width of aside */
}


/* Misc Styles */
.transaction-history-list {
 list-style:none;
 border-bottom:1px solid #ccc;
 padding:0 0 5px 0;
 margin:0;
}
.transaction-history-list li {
 padding:5px 0 0 0;
 margin:5px 0 0 0;
 border-top: 1px solid #ccc;
}
.transaction-history-list li > div {
 /* Right column */
 padding-left:10px;
}
.transaction-history-list li > aside {
 /* Left column */
}
.transaction-history-list time {
 display:block;
 color: #999;
 font-size: .8em;
 margin:2px 0 0 0;
}
.transaction-history-list p {
 display:block;
 color: #333;
 font-family:sans-serif;
 font-size: .8em;
 margin:4px 0 0 0;
}

</style>

In the HEAD (to enable html5 elements in older IE):

<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

And in the BODY:

<ol class="transaction-history-list">
 <li>
  <aside>
   <span>Some User</span>
   <time>5/25/2011 10:52 PM</time>
  </aside>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in tellus orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquet lorem vitae nulla faucibus rutrum. Phasellus et tellus sit amet turpis feugiat bibendum nec laoreet urna. Etiam vitae leo elit, vel feugiat diam. Sed a augue urna. Nunc semper, nulla vel imperdiet tempor, ante enim dignissim dui, ut vehicula enim felis ut sem.</div>
 </li>
 <li>
  <aside>
   <span>Some User</span>
   <time>5/25/2011 10:52 PM</time>
   <p>This column also supports long content.</p>
  </aside>
  <div>Created in Starting Activity and assigned to Some User.</div>
 </li>
 <li>
  <aside>
   <span>Some User</span>
   <time>5/25/2011 10:52 PM</time>
  </aside>
  <div>Created in Starting Activity and assigned to Some User.</div>
 </li>
</ol>

---

I'd probably float the stuff that needs to go left and the stuff that needs to go right float right. You could still user percentage widths. And then give the parent a width of 100% and overflow hidden to contain the floats.

---

using float and margings are best option for aligning the items side by side.

---

May be confusing at first, but follow the comments in the CSS, and you should be fine :) Basically it uses floats, margins, padding, and width to position everything. Then it uses the lovely padding-bottom:10000px;margin-bottom:-10000px; hack to get equal heights. When adjusting the width of the left column, make sure to take into account width, margin, padding, AND border.

The CSS:

<style type='text/css'>
.transaction-history-list {
 list-style:none;
 border-bottom:1px solid #ccc;
 padding:0 0 5px 0;
 margin:0;
}
.transaction-history-list li {
 padding:5px 0 0 0;
 margin:5px 0 0 0;
 border-top: 1px solid #ccc;
 overflow:hidden;
 padding-left:250px; /* Width of aside (width+padding+margin+border) */
}
.transaction-history-list li > aside {
 position:relative;
 float:left;
 width:250px;
 right:250px; /* Width of aside (width+padding+margin+border) */
 margin-left:-100%;
}
.transaction-history-list li > div {
 position:relative;
 float:left;
 width:100%;
 padding-bottom:10000px;
 margin-bottom:-10000px;
 margin-left:-10px; /* Left padding + left border */
 padding-left:10px;
}
.transaction-history-list time {
 display:block;
 color: #999;
 font-size: .8em;
}
</style>

And the HTML:

<ol class="transaction-history-list">
 <li>
  <div>Created in Starting Activity and assigned to Some User.</div>
  <aside>
   <span>Some User</span>
   <time>5/25/2011 10:52 PM</time>
  </aside>
 </li>
 <li>
  <div>Created in Starting Activity and assigned to Some User.</div>
  <aside>
   <span>Some User</span>
   <time>5/25/2011 10:52 PM</time>
  </aside>
 </li>
 <li>
  <div>Created in Starting Activity and assigned to Some User.</div>
  <aside>
   <span>Some User</span>
   <time>5/25/2011 10:52 PM</time>
  </aside>
 </li>
</ol>