Question

Yes, I know this seems like the same question yet again, but give me a chance…
I’m trying to create something similar to an http address box and “go” button:

[input box – width of whole window minus size of right button] [go button]

Very easy with a table (works with a <form> and input boxes too)

<table width="100%"><tr>
<tr>
<td>free text goes in here and takes as much space as available! free text goes in here and takes as much space as available!</td>
<td width="1"><a href="">GO</a></td>
</tr></table>

Before you answer, note that critical to a CSS “success” is NOT to set the width of the GO button as fixed! I know how to do it in CSS with a fixed width float right, but … This would means that if the “GO” text changes to “RUN” or the font changes, I’ve to manually re-set the width of the fixed right part. That makes the whole point of CSS (IMNSHO) pointless, esp. if a table is smart enough to do this.

Answer 1

Demo fiddle

HTML:

<form action="">
    <fieldset>
        <button type="submit">GO</button>
        <span>
            <input type="text" />
        </span>
    </fieldset>
</form>

CSS:

fieldset {
    border: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
button {
    float: right;
}
span {
    display: block;
    overflow: hidden;
    padding-right: 10px;
}
input {
    width: 100%;
}

Tested on Win7 in IE7, IE8, IE9, Opera 11, Chrome 12, FF 4, SafariWin 5.

With thanks to thirtydot’s recent revision.