Input text auto width filling 100% with other elements floating - html

Question

i have the following layout for a search box with:
<div id="emulating_variable_width">
<form id="srxForm" method="post">
<div id="qsrxSearchbar">
<div id="scope"> Person Name </div>
<input type="text" id="theq" title="Search">
<button id="btnSearch" type="button">Search</button>
</div>
</form>
</div>​
(its very much simplified for showing purposes)
The title in the 'scope' is a text that can be variable in length
What i will like is to have the input text element to fill all available space (i.e. yellow space), while keeping the search button at the right.
Full example with the CSS is in a fiddle
Which would be the easiest way to accomplish a solution working in IE7+,FF,Safari,etc... ?
Thanks!

Answer 1

Like this?
DEMO: http://jsfiddle.net/v7YTT/19/
HTML:
<div id="emulating_variable_width">
<form id="srxForm" method="post">
<div id="qsrxSearchbar">
<button id="btnSearch">Search</button>
<label id="scope"> Person Name </label>
<span><input type="text" id="theq" title="Search" /></span>
</div>
</form>
</div>​
CSS:
#qsrxSearchbar
{
width: 500px;
height: 100px;
overflow: hidden;
background-color: yellow;
}
#qsrxSearchbar input
{
width: 100%
}
#qsrxSearchbar label
{
float: left
}
#qsrxSearchbar span
{
display: block;
overflow: hidden;
padding: 0 5px
}
#qsrxSearchbar button
{
float: right
}
#qsrxSearchbar input, .formLine button
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
​

Answer 2

hey you can used focus properties in input field as like this
Css
#emulating_variable_width{
width:500px;
height:100px;
background-color:yellow;
}
input {
width:auto;
/*width:100%;*/
float:left;
width:100px;
font-size: 17px;
}
#scope{float:left;}
button{float:left;}
input:focus{
width:200px;
}
HTML
<div id="emulating_variable_width">
<form id="srxForm" method="post">
<div id="qsrxSearchbar">
<div id="scope"> Person Name </div>
<input type="text" id="theq" title="Search">
<button id="btnSearch" type="button">Search</button>
</div>
</form>
</div>
Live demo http://jsfiddle.net/rohitazad/v7YTT/1/

Answer 3

You need something like this:
#emulating_variable_width{
width:500px;
height:100px;
background-color:yellow;
}
input {
width:320px;
/*width:100%;*/
float:left;
font-size: 17px;
}
#scope{float:left;}
button{float:left;}