HTML button filling remaining width

Question

I am not a HTML expert, just doing some fun coding once in a while. What I try to accomplish is to have the button in the "td" filling the remaining width, as simple as possible.

<table width="100%">
<tr>
  <td>My Text</td>
  <td>
    <input name="x" id="y" type="text" size="4" maxlength="4" />
    <input type="button" onclick="..."  value="BlaBla" />
  </td>
</tr>
<tr>
  <td>Other Text</td>
  <td>
    <input name="xx" id="yy" type="text" size="20" />
    <input type="button" onclick="..."  value="MoreBlaBla" />
  </td>
</tr>
</table>

I have tried width 100%, but this gives me an extra line. I have checked some answers such as Help with div - make div fit the remaining width here, but since I am not an expert in HTML it is getting too complex. Guess there is a very simple solution.

Answer 1

Try this

<td>
                <input name="x" id="y" type="text" style="float:left;" size="4" maxlength="4" />
                <input type="button" onclick="..." style="float:left;width:70%"  value="BlaBla" />
    </td>

Answer 2

Basically, there is no way to specify this using HTML+CSS. At some point pretty much everyone has wanted this, and it doesn't exist.

If you are sticking with HTML+CSS, if you have widths specified in some predictable way (either fixed lengths, or percentages), then you can calculate the right percentage (or other measure) to set for the button width. This is probably the best way.

If that is impossible, your next choice is javascript (which you should enhance with at least one of the many libraries that exist now to make javascript so much easier to use).

Answer 3

Try this:

<tr>
<td>My Text</td>
<td>
    <input name="x" id="y" type="text" size="4" style="float:left;width:100px" maxlength="4" />
    <div style="padding-left:100px"><input type="button" style="width:100%" value="BlaBla" /></div>
</td>
</tr>

Answer 4

Well it can be done with JavaScript but it doesn't look that great.

A right-aligned, fixed width button looks better IMHO.