Textbox to fill space - html

Question

Consider the following.
2 DIVS - the left one of known width, the right one of unknown width.
We can make the right-hand side fill the remaining space, however if I exchange the right-hand DIV to a textbox, it then does not fill the space, but wraps below the left-hand div.
Here's a fiddle: example
<div>
<div id="left">
left
</div>
<input type="textbox" id="right">
right
</input>
</div>
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
width: 100%;
background-color:#00FF00;
}
I'm confused - any advice?
Still not behaving as it should!
New fiddle here: updated fiddle

Answer 1

JSFiddle
Inputs are inline bydefault and only the
Block level elements can aquire the remaining space left after a floating element. So you should change the display property for input to block i.e. display:block
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
display:block;
background-color:#00FF00;
}
<div>
<div id="left">
left
</div>
<input type="textbox" value="right" id="right"/>
</div>
EDIT: http://jsfiddle.net/naeemshaikh27/MHeqG/1522/ using Calc.

Answer 2

Using Calc
If You wanted to set the width of only a single element, you may want to look at the calc() option.
Something like:
width: calc(100% - width px);
in which could be incorporated into most projects nowadays, as you can see from its browser support.
You could also make use of the auto width:
.secondElement{
width:auto;
}
to fill the space left
Have a look here...
* {
margin: 0;
padding: 0;
}
div {
display: inline-block;
width: 50%;
background: blue;
}
input {
width: 50%;
display: inline-block;
}
.fix {
border: none;
background: gray;
}
.now {
width: 49.5%;
}
.nowNew {
width: auto;
}
<div>Div on left</div>
<input type="text" placeholder="text here" />
<br/>Notice the lengths aren't the same? Yet both are defined as 50%?
<br/><br/>
<br/>That's due to the border around the input!
<br/><br/><br/>
<div>Div on left</div><input class="fix" type="text" placeholder="text here" />
<br/><br/>
<br/>To fix 'stuff' like this, I feel the general rule in web dev. is to aim to make it 99.9% instead:
<br/><br/><br/>
<div class="now">Div on left</div><input class="now" type="text" placeholder="text here" />
<br/><br/>
<br/>Or make the input width auto:
<br/><br/><br/>
<div>Div on left</div>
<input class="nowNew" type="text" placeholder="text here" />

Answer 3

You can accomplish this using display: table and display: table-cell.
JSFIDDLE
HTML:
<div class="container">
<div id="left">
left
</div>
<input type="textbox" value="right" id="right" />
</div>
CSS:
#left {
display: table-cell;
width: 180px;
background-color:#ff0000;
}
#right {
display: table-cell;
width: 100%;
background-color:#00FF00;
}
.container {
display: table;
width: 100%;
}