Is there a way to create a text input box that automatically adjusts its width in all browsers, including IE6 and newer? In the example below, the textbox expands to fit the content "text." Are there any cross-browser solutions for this issue?
See demo on jsfiddle: http://jsfiddle.net/P4Qd8/1/
Sample HTML
<div id="wrapper">
<div id="left">Label</div>
<div id="right">Text</div>
<div id="middle">
<input id="info" type="text">
</div>
</div>
Corresponding CSS
#wrapper{height: 100px; width: 350px; border: 1px solid blue;}
#left{float:left;}
#middle{float:left;}
#right{float:right;}
#info{width: 100%;}
Thank you for your assistance!