css two column list with balanced column height

I would like to create a 2 column list.

-----------------------------------
price         1.5
-----------------------------------
description   Some text about the
              product written here
              and will expand the 
              height of this column
-----------------------------------
availability  Yes
-----------------------------------
Feature       Some feature about
              the product 
-----------------------------------

I'm using a list with span tag inside each li to make the information inline. But the problem is when the information gets longer like in the case of description and feature, the column he开发者_JS百科ight does not grow and thus text on second row is hidden.

So how do I make the left hand side column same height as the right hand column depending on the amount of text written ?

This argument is getting a little daft... Nobody seems to be suggesting that tables are used for layout without semantic meaning, only that the example data provided is tabular and therefore should be displayed in a table. So I can't see the point of posting links about table layout when it is clear that everyone taking part in this debate moved past that years ago.

As BalusC says, the data could quite correctly be displayed in a definition list. It certainly produces more elegant markup, but whether it is more semantically correct is (obviously, from this discussion) debatable. I know of no definition of tabular data that precludes this use, including the OED! Thus using a table for this data is, as prodigitalson says, also fully valid.

Robert Grant - could you provide a link that defines a table as data that requires two labels to identify it? I'm not aware of this definition, but I am willing to learn. I am a little confused as to how using spans in a div is more semantically valid than a table though. Or how it is in any way semantic. Both are meaningless tags.

The markup used must establish the relationship between the key-value pairs. Only a table or dl can do this.

The example markup for the table is pretty sound (as there is no need for a thead btw, the tbody tag is not really necessary as there are no other elements of the table to differentiate). A scope="row" on the tags is necessary for screen readers though, in addition to the caption.

Having said all this, the whole point here is to help someone solve a problem. The nature of that problem would tend to indicate that garj is not an advanced front end developer and that their css skills may not be at the highest standard yet. To me, this means that using a tabular solution is preferable. Styling a dl in a way which degrades gracefully in any browser with a substantial market share is not a trivial task by any means.

As the comment from Cletus on your question says... use a table. There is a valid use for tables, and if this isnt one then nothing is - display of this type of data is the exact reason they were implemented.

<style type="text/css">
  table.product td, table.product th {vertical-align: top; padding: 5px;}
</style>
<table class="product" cellspacing="0" border="0" width="250">
<tr>
  <th>price</th>
  <td>1.5</td>
</tr>
<tr>
  <th>description</th>
  <td>Some text about the product written here and will expand the height of this column</td>
</tr>
<tr>
  <th>availability</th><td>yes</td>
</tr>
<tr>
  <th>Feature</th>
  <td>Some feature about the product</td>
</tr>
</table>

This will function better than a <dl>, but is not as semantically correct as a <table>.

<ul>
    <li>
        <h2>Price</h2>
        <p>1.5</p>
    </li>
    <li>
        <h2>Description</h2>
        <p>Some text about the product written here and will expand the  height of this column</p>
    </li>
    <li>
        <h2>Availability</h2>
        <p>Yes</p>
    </li>
    <li>
        <h2>Feature</h2>
        <p>Some feature about the product</p>
    </li>
</ul>

This is better that a <dl> because the <li> acts as a wrapper, and will hold the <p> content. If you use the <dl> there is no wrapper around the seperate <dt> and <dd>s.

And when the <p> expands it won't crash into next <li>

The CSS:

li {
    overflow: hidden;
    width: 500px; /* or however wide it needs to be */
    }

li h2 {
    float: left;
    width: 150px;
    }       

li p {
    float: right;
    width: 350px;
    }

Here'd be my stab at it. Tested in Firefox 3 and IE7, so YMMV, but at least it'll degrade nicely.

<html>
<head>
    <style type="text/css">
      #items {
        width: 300px;
        border-top:1px solid gray;
      }

      #items div {
        clear: left;
        overflow:hidden;
        padding: 5px 0;
        border-bottom:1px solid gray;
      }

      .key  {
        width:100px;
        float:left;
      }

      .value  {
        width:200px;
        float:left;
      }
    </style>
</head>
<body>
  <div id="items">
    <div>
      <span class="key">price</span>
      <span class="value">1.5</span>
    </div>
    <div>
        <span class="key">description</span>
        <span class="value">Some text about the product written here 
        and will expand the height of this column</span>
    </div>
    <div>
        <span class="key">availability</span>
        <span class="value">Yes</span>
    </div>
    <div>
        <span class="key">Feature</span>
        <span class="value">Some feature about the product</span>
    </div>
  </div>
</body>
</html>

See also:

• Why Tables Are Bad For Layout
• Why Tables For Layout Is Stupid
• From Table Hacks to CSS Layout: A Web Designer’s Journey