Question

Task: Make text box 100% width but allow enough room for button.

Problem: Button appears on next line and text box exceeds width of its container.

<div class="field">
    <input type="text" name="my-field" />
    <input type="button" id="my-button" value="Add +" />
</div>

 .field {
     margin-right: -70px;
     width: 100%;
 }
 .field input[type=text] {
     display: block;
     float: left;
     margin-right: 70px;
 }
 .field input[type=button] {
     display: block;
     float: right;
 }

My primary layout uses the following trick to achieve flexible width with fixed sidebar, but for some reason this is not working on the above.

<div class="outer-wrap">
    <div class="content">
        ...
    </div>
    <div class="sidebar">
        ...
    </div>
 </div>

 .outer-wrap {
     margin-right: -300px;
     width: 100%;
 }
 .content {
     float: left;
     margin-right: 300px;
 }
 .sidebar {
     float: right;
 }

What mistake am I making here?

Answer 1

You have to screw with the HTML a bit, but otherwise this works perfectly in IE7+ and all modern browsers.

See: http://jsfiddle.net/thirtydot/25bZC/

CSS:

.field > span {
    display: block;
    overflow: hidden;
    padding-right: 10px
}
.field input[type=text] {
    width: 100%
}
.field input[type=button] {
    float: right
}

HTML:

<div class="field">
    <input type="button" id="my-button" value="Add +" />
    <span><input type="text" name="my-field" /></span>
</div>