CSS make textbox fill all available width

Question

I have the following "line" in my web page

<div style="width:100%"> "Some Text" <DropDown> "Some more text" <TextBox> <Button> <Button> </div> 

The DropDown control I don't really have control over the width, as it sizes to fit whatever the longest option value is. The Buttons are fixed width. How can I get the TextBox to fill all available remaining width?

I tried putting it in a table but run into the same problem, ie how do I make all other columns as small as possible to fit their content and then the TextBox column fill remaining width?

Hacky solutions are fine if necessary, I've long ago given up any pretence of even caring about CSS standards when it's so difficult to do the simplest thing.

Edit: to clarify, by TextBox I mean <input type="text"/>

Answer 1

UPDATED ANSWER IN 2018

Just came across this old question and there is now a much simpler and cleaner way to achieve this by using the CSS Flexible Box Layout Model which is now supported by all major browsers.

.flex-container {    display: flex;  }    .fill-width {    flex: 1;  }

<div class="flex-container">  	<label>Name:</label><input class="fill-width" type="text" /><span>more text</span>  </div>

Hope this helps someone!

OLD ANSWER BELOW

I know this is an old question but the correct solution isn't here so just in case somebody else finds there way here:

The solution is to wrap the textbox in a span.

HTML:

<label>Input</label> <span>     <input/> </span> 

CSS:

label {     float: left; }  input {     width: 100%;     box-sizing:border-box; }  span {     display: block;     overflow: hidden; } 

See this fiddle for an example (now slightly out of date as I removed padding in favor of using border-box on the input).

Answer 2

Here is what worked for me. Note that in some cases I had to use   between items otherwise it fell to the next line.

.flexContainer {      display: flex;      width:100%;  }  input {      width: 100%;  }

<div class="flexContainer">  <span>text:&nbsp;</span> <input/> &nbsp; <label>text</label>  </div>