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.

Are you talking about the small padding around the table border? http://jsfiddle.net/SuperPhil/3KrwQ/ — Phil, Jul 15 '11 at 13:54
Nope, I want the button filling the remaining space of the second column... — Horst Walter, Jul 15 '11 at 14:01
This is possible, if I'm understanding correctly. Can you clarify whether you want to adjust the width of the ` — thirtydot, Jul 15 '11 at 14:15
I want to change width of button - but maybe you are right. maybe I should give it a constant width and right align it. — Horst Walter, Jul 15 '11 at 15:28

score 1 · Answer 1 · answered Jul 15 '11 at 13:56

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>

answered Jul 15 '11 at 13:56

ShankarSangoli

69,612
13
93
124

Gives me a second line in the tr as well. Just to make it clear, there is enough space in the 2nd td for input and button. – Horst Walter Jul 15 '11 at 14:00

score 1 · Answer 2 · answered Jul 15 '11 at 14:08

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

Wow, I really thought these days with all this HTML5 and other stuff this was a very easy problem. Surprise me, thanks for clarifying. — Horst Walter, Jul 15 '11 at 14:12

score 1 · Answer 3 · answered Jul 15 '11 at 14:10

1

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>

answered Jul 15 '11 at 14:10

tskuzzy

35,812
14
73
140

Works, but not in all browsers the same, so somehow it is not reliable as far as I have tested it (latest Chrome, IE, Firefox). Thanks anyway, the "closest" answer so far. – Horst Walter Jul 15 '11 at 17:43
You might have to fiddle with some of the pixel values. IE in particular has some strange box model quirks. – tskuzzy Jul 15 '11 at 18:39

score 1 · Accepted Answer · answered Jul 15 '11 at 19:40

1

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

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

answered Jul 15 '11 at 19:40

andyb

43,435
12
121
150

Guess this the best way to carry on .. I was so naive to think this is an easy question, and even if solved the result is not as good as I thought (which I can only tell when I see it, too little imagination or experience on my side). – Horst Walter Jul 15 '11 at 19:44
Hey, don't worry about it! It _should_ be an easy one to simply style an element to occupy the remaining space. – andyb Jul 15 '11 at 22:10

HTML button filling remaining width

4 Answers4