CODEWITHSUNDEEP
htmlcssstylesheet
Horst Walter
Horst Walter

Reputation: 14081

HTML button filling remaining width

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.

Upvotes: 2

Views: 2415

Answers (4)

andyb
andyb

Reputation: 43823

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

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

Upvotes: 1

tskuzzy
tskuzzy

Reputation: 36456

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>

Upvotes: 1

Marcin
Marcin

Reputation: 49826

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).

Upvotes: 1

ShankarSangoli
ShankarSangoli

Reputation: 69905

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>

Upvotes: 1

Related Questions