Question

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 content 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?

Answer 1

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>