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

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 2

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 3

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

Answer 4

This is not doable in CSS as far as Chrome is concerned. The feasible way is by manipulating the size attribute of the form control through JavaScript. If the length of the string is 25, add an extra of at least 10 for the clearance.

HTML

<!-- "The quick brown fox jumps over the lazy dog" is 43 characters long -->
<input type="text" value="The quick brown fox jumps over the lazy dog" id="textbox1" />

JavaScript / jQuery

<script>
    var value = jQuery('#textbox1').val();                  // 43
    jQuery('#textbox1').attr('size', value.length + 10 );   // resizes the textbox
</script>

Another option also is by pre-calculating the size from a back-end script.

PHP / HTML

<?php
$value = "The quick brown fox jumps over the lazy dog";
?>
<input type="text" value="<?php echo $value; ?>" size="<?php echo ( strlen($value) + 10 ); ?>" />

Answer 5

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 6

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>