Positioning of a label for a textarea

There is a textarea with a label and a small image near to it. I want both of them to be placed just near the textarea. But an image is shown after the label. The HTML is very simple:

<textarea cols=70 id="test" rows="6" style=""></textarea>
<label for="test" style="vertical-align:top; border: 1px solid black; float:none;">Error!</label>
<img width开发者_StackOverflow中文版="20" src="plus-icon_16.png" style="margin-left: 3px; border: 1px solid black; vertical-align:bottom;" />

Example here: http://stavki.vetko.net/new.html

Thanks.

Put the label and the image inside a div. You can then position them correctly as you want, and only need to position the div itself relative to the textarea.

One way you could fix this is by adding a container span for the label and img like so:

<textarea cols=70 rows="6"></textarea>
<span id="wrap">
    <label for="test">Error!</label>
    <img src="plus-icon_16.png"/>
</span>

You can then float this to the right of the textarea, and then absolutely position the two elements within it.

#wrap {
    display:inline-block;
    vertical-align:top;
    position:relative; 
}

#wrap label {
    position:absolute;
    top:0;
    left:0;
}

#wrap img {
    position:absolute;
    bottom:0;
    left:0;
}

http://jsfiddle.net/dtdN9/3/