Question

I have a 50×50 image and an <input type="text" /> field that I want to be on the right side of the image. I’ve tried this:

<img src="missing-image.png" />
<div name="image_input">
    <input type="text" />
</div>

And with this CSS:

#image_input {
    position: absolute;
    top: 10px;
}

But the text input won’t go to the right side of the image. Also as you can see I want it to be centralized with the height of the image and as I can see it won’t work too. How I can correct this?

PS: All that is inside a <form>

Answer 1

Position absolute gives you more control:

HTML

<div name="image_input">
    <img src="missing-image.png" />
    <input type="text" />
</div>

CSS

div {
    position:relative;
}

input{
    position:absolute;
    right:10px;
    bottom:20px;
}