How to get text input box to fill remaining space?

Scripsit Ben C:

On 2008-06-29, Jukka K. Korpela <jkorpela (AT) cs (DOT) tut.fi> wrote:
[...]
.foo
{
display: block;
overflow: hidden; /* to make it a BFC */
}
input[type="text"] { width: 100%; }
input[type="button"] { float: right; }
[...]
b) on IE 7, it causes the right border of the input box hit the
button; this looks odd and puzzling

I suppose a small margin on the input box might solve that problem.

Well, how much margin can you have if you have 100% width? On IE 7,
setting a margin does not seem to have any effect.

(If you set left margin for the button, the right border of the text
input box magically disappears.)

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

On 2008-06-30, Jukka K. Korpela <jkorpela (AT) cs (DOT) tut.fi> wrote:

Scripsit Ben C:

On 2008-06-29, Jukka K. Korpela <jkorpela (AT) cs (DOT) tut.fi> wrote:
[...]
.foo
{
display: block;
overflow: hidden; /* to make it a BFC */
}
input[type="text"] { width: 100%; }
input[type="button"] { float: right; }
[...]
b) on IE 7, it causes the right border of the input box hit the
button; this looks odd and puzzling

I suppose a small margin on the input box might solve that problem.

Well, how much margin can you have if you have 100% width?

Difficult unless you make the margin a percentage and use 5% + 95% or
something. In that case you might as well just set width to 95% and not
bother with margin.

On IE 7, setting a margin does not seem to have any effect.

Well I can't cure a rainy day.

Actually a more sensible solution in the example I gave would be some
right padding on .foo instead. Then you can set the padding in pixels.

(If you set left margin for the button, the right border of the text
input box magically disappears.)

Presumably it hasn't disappeared but is just covered up by the left edge
of the button.