Text input field plus image should have total width of N em

[Kai Grossjohann]

I would like to put a text input field (in the sense of <input
type="text">) and an image next to each other, where I know the size
in pixels of the image, and I know the total width in em. I haven't
found a way to do this.

I tried

<span style="width:20em">
<input type="text">
<img width="25px" src="...">
</span>

And I also tried

<table>
<td width="*"><input type="text"></td>
<td width="25px"><img src="..." width="25px"></td>
</table>

And I also tried a number of other things, but the above give you the
idea which direction I was looking.

In all cases, the <input type="text"> doesn't resize to match the
total width. Is there a way to achieve this?

(If the total width is given in px, then I guess I can just compute
the width of the <input type="text"> and Bob's my uncle. But what if
the total width is given in em, not px?)

tia,
Kai

[Jukka K. Korpela]

Ka*************@gmx.net (Kai Grossjohann) wrote:

I would like to put a text input field (in the sense of <input
type="text">) and an image next to each other, where I know the size
in pixels of the image, and I know the total width in em.
Since this is a presentational problem, it might belong to
c.i.w.a.stylesheets rather than c.i.w.a.html. I'm not setting
followups, though, since the nature of the problem is rather unclear.

You need to describe the problem in more detail. What do you mean by
knowing the total width in em? What is the context? (And is it really
useful to put the input field and the image next to each other? Why?)

If you just use <input ...><img ...>, then the elements will appear
next to each other. But presumably you want something else, too.
I tried

<span style="width:20em">
<input type="text">
<img width="25px" src="...">
</span>
Please explain what you are trying to accomplish, instead of just
giving some sketch markup, which isn't even valid. And what effect do
you expect the width property for span to have? By the specifications,
it should have no effect.
And I also tried

<table>
<td width="*"><input type="text"></td>
<td width="25px"><img src="..." width="25px"></td>
</table>
Again, the markup isn't even valid. It's actually grossly malformed.
And I also tried a number of other things, but the above give you the
idea which direction I was looking.
No, incorrect markup does not tell what you expect to achieve.
In all cases, the <input type="text"> doesn't resize to match the
total width. Is there a way to achieve this?

Oh. So _that_ is the real problem? But you still need to explain in
more detail. Specifically, which "total width"? So you mean that you
would like to set the sum of the widths of an <input> element and an
<img> element to 20em so that the <img> element is of fixed width in
pixels and the <input> element occupies the rest? Why didn't you say
this in the first place? And your snippets indicate _no_ attempt to set
the width of the <input> element.

Well, there's really no way to subtract pixel values from em values.
Why would you try that? Isn't it simpler to set the width of the
<input> element to the desired value, say 20em or 18em, and leave it at
that? Actually, setting the width using the size="..." attribute in
HTML is more constructive than using em units, since the size attribute
uses a natural unit, the width of an average character (though some
browsers are known to get this wrong in the sense of using a larger
value).

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

[Kai Grossjohann]

"Jukka K. Korpela" <jk******@cs.tut.fi> writes:

Oh. So _that_ is the real problem? But you still need to explain in
more detail. Specifically, which "total width"? So you mean that you
would like to set the sum of the widths of an <input> element and an
<img> element to 20em so that the <img> element is of fixed width in
pixels and the <input> element occupies the rest?
Exactly this is what I tried to accomplish. As the subject says:

"Text input field plus image should have total width of N em"

The only part that's missing from the subject is the fact that the
image has a fixed width in pixels. I think this becomes clear from
the examples, all of which show that the image is 25px wide.
Why didn't you say this in the first place?

I tried to...

But thank you very much for understanding me anyway, even though I
described my wishes so badly.

Do you have a suggestion?

Kai