100% input text, a button next to it - how?

Question

I want to do the following

(we are inside a fix width div)
<input text><img>

if I set 100% width to the text, the img goes newline.

EDIT: I tried:

<div style="width: auto;">
<input style="width: 100%; float: left;" />
</div>
<img style="float: right;" alt="smiles" src="a.gif" width="21" height="21" />

because I want it to be as wide as the inner container MINUS image width — user1929946, Mar 31 '13 at 15:28

score 1 · Answer 1 · edited May 23 '17 at 12:13

1

Try this code:

<div>
    <img style="float:right;" src="a.gif" />
    <input style="width: 100%; display:block;" />
</div>

What this code does: It floats the image to the right of the block in question. The display:block; makes the input a block element, which will pay attention to the float above (an inline-element would not care about it).

BTW, I took this solution from here: Expand a div to take the remaining width

edited May 23 '17 at 12:13

Community

1
1

answered Mar 31 '13 at 15:47

Refugnic Eternium

4,089
1
15
24

still no joy, img goes newline – user1929946 Mar 31 '13 at 15:56
@user1929946 Okay, I found a better solution. I tried it and it works as desired (if I got you right). – Refugnic Eternium Mar 31 '13 at 16:19
the inputfield overlaps the image :D – user1929946 Mar 31 '13 at 16:23
I could've sworn...try adding `overflow:hidden` please. Which browser are you using? – Refugnic Eternium Mar 31 '13 at 16:24
@user1929946 Do you have a link where I could look at your version of the page? Because you see, for me it works just fine (though Opera gives me funky results) – Refugnic Eternium Mar 31 '13 at 16:28
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/27279/discussion-between-refugnic-eternium-and-user1929946) – Refugnic Eternium Mar 31 '13 at 16:33

100% input text, a button next to it - how?

1 Answers1