1

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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Mike
  • 13
  • 2
  • 1
    If you don't specify the width of a floated element it will take the space it needs to display its contents, assuming that the contents aren't longer than the width of element in which that element is floated. – David Thomas Jun 25 '11 at 13:36

1 Answers1

2

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.

Community
  • 1
  • 1
NGLN
  • 43,011
  • 8
  • 105
  • 200
  • 1
    I'm glad to see someone found it useful that I edited my old answers to include this method :) – thirtydot Jun 25 '11 at 14:24
  • thank you. I didn't realize what the combination of overflow:hidden;display:block; can provide! – Mike Jun 25 '11 at 18:09