CSS fixed fixed float layout - css

Question

I'm trying to build a searchbox with label filters tucked to the left of the box, my markup looks something like this:
<div id="searchbox">
<div class="filter"> filter 1 </div>
<div class="filter"> filter 2 </div>
<input id="input" value="search query">
</div>
I put one of my attempts in a jsfiddle:
http://jsfiddle.net/nSDV9/7/
I want the input element to use all the remaining space in the searchbox, regardless of the number of filter elements tucked to the left of it (including zero). I have tried to apply the float/overflow:hidden/etc. tricks I could find, but I haven't been able to get the effect I want.

Answer 1

You can do like this:
http://jsfiddle.net/nSDV9/9/
Html:
<div id="container">
<div class="filter"> filter 1 </div>
<div class="filter"> filter 2 </div>
<div class="searchwrap">
<input id="searchbox" value="search query">
</div>
</div>
Css:
#container{
width: 500px;
background: red;
overflow: hidden;
position: relative;
}
.searchwrap{
background:green;
overflow:hidden;
position:relative;
height:20px;
}
.filter{
float:left;
background-color: green;
color: white;
font-weight: bold;
}
#searchbox {
position: absolute;
border: 0;
background: yellow;
left: 0;
width:100%;
}

Answer 2

See: http://jsfiddle.net/thirtydot/nSDV9/8/
HTML:
<div id="container">
<div class="filter"> filter 1 </div>
<div class="filter"> filter 2 </div>
<div class="search-container"><input id="searchbox" value="search query"></div>
</div>
CSS:
#container{
width: 500px;
background: #ccc;
overflow: hidden;
position: relative;
}
.filter{
float: left;
margin-top: 4px;
margin-right: 4px;
background-color: green;
color: white;
font-weight: bold;
}
.search-container {
overflow: hidden;
padding: 4px;
}
#searchbox {
width: 100%;
margin: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

Answer 3

This is the cleanest I could make:
http://jsfiddle.net/nSDV9/11/