Filling the space between floating elements

Question

I have a div container (gray box) with floating elements inside:

Bars float to the left, and the button to the right. Now I want the text box to fill the empty space between the bars and the button.

Please note that the number of columns may vary depending on the type, so the text field must be changed accordingly. Thus, solutions with static width (even if expressed in%) will not work.

How can i do this?

EDIT:

Here is my code:

HTML:

<div id="dp-container"> <ol id="tag-list"> <li dp-item class="dp-bar-table">sales</li> <li dp-item class="dp-bar-field">cost</li> </ol> <input id="dp-input-str" type="text"> <input type="button" value="GO" style="float: right;"> <div style="clear:both;"></div> </div>​ 

CSS

 body { font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; } ol { display: inline; margin: 0; padding: 0; vertical-align: middle; list-style-type: none; } li[dp-item] { background-color: #e0ffff; display: inline-block; float: left; padding: 3px; margin: 2px; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#EBEBEB)); border: 1px solid lightgray; border-radius: 3px; } .dp-bar-table { color: blue; font-weight: bold; } .dp-bar-field { color: blue; } #dp-input-str { border: none; display: inline-block; margin-left: 5px; margin-top: 3px; width: auto; outline: none; font-size: 12pt; vertical-align: middle; line-height: 25px; box-shadow: none; #dp-container { display: inline-block; border: 1px solid #d3d3d3; height: 32px; padding: 3px; width: 90%; } #dp-find-str { color: gray; float: left; margin-top: 10px; margin-right: 8px; } 

Answer 1

You might want to check out this http://jsfiddle.net/bYmM4/7/ . Write like this:

HTML

 <div class="main"> <input type="button" value="test" /> <input type="button" value="test" /> <input type="button" value="Go" class="go"/> <div class="textbox"> <input type="text" /> </div> </div> 

CSS

 .main{position:relative; border:#333 1px solid} input[type="button"]{width:8%; float:left;} .textbox{ background-color:grey; overflow:hidden; position:relative; } .textbox input{ width:100%; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } input.go{float:right}