CSS text wrapping for IE6+

Question

I have the following HTML structure that is generated by a View in a MVC framework. This HTML structure is repeatedly used on a page to show name-value pairs of a form the user filled out. It's basically a HTML widget that is being called by the View to display each name-value pair.

For simplification, the original class attribute has been replaced with the style attribute to see the properties more clearly.

<div>
  <p>
   <span style="display: inline-block; width: 40%;">Name:</span>
   <span>Value</span>
  </p>
</div>

This normally displays like so:

Name: Value

Currently, if the "value" is too long, the display does this.

Name: This value is extremely
too long for me.

I want to change this display behavior, so it look like this.

Name: This value is extremely
      too long for me. Any 
      longer string simply
      adds to the bottom.

The only way I can think of to accomplish this and still work in IE6 is with table tags, but there would end up being a lot of table tags for each name-value pair displayed. I cannot put the data on the page into a single table tag. Is there a more lightweight solution in CSS/slight changes to HTML that would still work in IE6?

Answer 1

<div class="name_value">
<div class="name">Name</div>
<div class="value">Extremely big text</div>
<div class="clearfix"></div>
</div>

<style type="text/css">
.name_value { position: relative;  }
.name { float: left; display: inline; width: 50%}
.value { float: right; display: inline; width: 50%; }
.clearfix { clear: both; }
</style>

Answer 2

You could use something like this: jsFiddle

HTML:

<div class="outer">
    <div class="left">Name:</div>
    <div class="right">This value is extremely too long for me.</div>
</div>

CSS:

.outer{
   width: 100%;
   max-width: 200px;
}
.left{
   float: left;
}
.right{
   float: right;
   max-width: 130px;
}