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

You can set the width of the textbox to 100% (with css as you did with the div), so it'll be spanned to the full extent of it's parent (assuming the parent tag extends the full screen).

Answer 2

I would suggest the following:

<div style="width:100%; white-space:nowrap">
"Some Text" <DropDown> "Some more text" <TextBox style="width:100%"> <Button> <Button>
</div>

Answer 3

The only way I see it feasible is with Javascript, so you get the width of the div (in pixels), deduct the current size of the other controls and add the result as with of the input. That would require you to put the text inside a span control (so you can get its size).

Answer 4

Set the width of the textbox to 100% with the css property display: inline;?