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