HTML input control maximum available width?

Question

I have a row in a web page. which has three controls

SomeText Input                       Button

It is like this
<div> SomeText <Input/> <img> </div>

In above img is floating right

Right now i have Input size 30, but in small resolution 30 is too big for the row and it splits in two.

I want input width to be maximum available instead of fixed width.

If i try size = 100% it takes whole row start to finish pushing text and img above and below in new row.

How do i need to format this row?

Answer 1

In the simple case:

<div>
    <label for="thing">SomeText</label>
    <input type="text" id="thing" />
    <img />
</div>

div label { float: left; width: 20%; }
div input { width: 60%; }

This is assuming that SomeText will fit nicely into 20% of whatever width you've got.

But maybe it won't.

If you want to have fixed-size elements (eg. 8em each) at the sides and subtract those from the width of the input, you'd need to say 100% minus 16em. Unfortunately CSS has no such expression-calculating feature. The best you can manage is by adding wrappers to make 100% correspond to what you really want:

<div>
    <label for="thing">SomeText</label>
    <img />
    <div>
        <input type="text" id="thing" />
    </div>
</div>

div label { float: left; width: 8em; }
div img { float: right; width: 8em; }
div div { margin-left: 8em; margin-right: 8em; }
div div input { width: 100%; }

It's a bit ugly as you have to fiddle the markup order for floats (or use absolute positioning). At this point you may be better off just giving up and using a table to get the desired width:

<table><tr>
    <td class="label"><label for="thing">SomeText</label></td>
    <td class="input"> <input type="text" id="thing" /></td>
    <td class="img"> <img /></td>
</tr></table>

table { table-layout: fixed; width: 100%; }
tabel .label, table .img { width: 8em; }
table input { width: 100%; }

Somewhat-complex liquid-layout forms often exceed the capabilities of CSS Positioning and need help from tables.

(Either way, a bit of box-sizing on the input can also help to line things up.)