Textbox To Fill Space

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 ri

Solution 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><divid="left">
         left
     </div><inputtype="textbox"value="right"id="right"/></div>

EDIT:http://jsfiddle.net/naeemshaikh27/MHeqG/1522/ using Calc.

Solution 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><inputtype="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><inputclass="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/><divclass="now">Div on left</div><inputclass="now"type="text"placeholder="text here" /><br/><br/><br/>Or make the input width auto:
<br/><br/><br/><div>Div on left</div><inputclass="nowNew"type="text"placeholder="text here" />

Solution 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%;
}