HTML input[type=text] take up remainder of space on the line

Question

I've tried and tried to get this to successfully work without using tables in IE7+ to no avail.

The working but not so desireable code:

<table>
  <tr>
    <td><label for="address">Address</label></td>
    <td><input type="text" name="address" value="" id="address" style="width: 100%;"/></td>
    <td><a href="#">Find</a></td>
  </tr>
</table>

What this will do is have: Address [ INPUT TEXT ] Find They'll be all on one line and the input field take up 100% of available space without pushing the label or a to the next line.

I cannot for the life of me get this to work without tables.

Input, comments, links appreciated!

Answer 1

See this this jsfiddle , both alternatives on the same screen.

Answer 2

See: http://jsfiddle.net/thirtydot/PLsuG/

This is a good solution that work in IE7 + greater and all modern browsers.

It's very similar to @CyberDude's second solution.

HTML:

<div class="formLine">
    <label for="address">Address</label>
    <a href="#">Find</a>
    <span><input type="text" name="address" id="address" value="" /></span>
</div>

CSS:

.formLine {
    overflow: hidden;
    background: #ccc
}
.formLine input {
    width: 100%
}
.formLine label {
    float: left
}
.formLine span {
    display: block;
    overflow: hidden;
    padding: 0 5px
}
.formLine a {
    float: right
}
.formLine input, .formLine a { 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}