style ul with width to accommodate items
- by Tallmaris
Sorry I could not find a similar answer on SO. I have the following markup (generated by jquery ui autocomplete but this is not the issue here)
<ul style="z-index: 1; display: block; border: thin solid red; width: 200px;">
<li>
<a>
<div style="font-size: 0.85em;">
<span style="float: right; padding-left: 10px; color: gray;">
United Kingdom
</span>
<span style="">text text text text text</span>
</div>
</a>
</li>
</ul>
As you can see in this fiddle: http://jsfiddle.net/fVr8P/2/ the text wraps because the width is limited and the country span is "floating". What I would like would be for the width to enlarge to accommodate the full length, but if I put width: auto; it will expand to 100%.
Background
The ul is of course coming from jquery ui autocomplete. I am styling the results a bit using the autocomplete.html extension. Problem is that everything is working ok in firefox an chrome because the autocomplete is set to the correct width on creation. in IE this does not happen (width is too small) so the text wraps. I am hping to come to a simple css only solution, without fiddling around in jQuery.
