Float align display:inline problem

<div style="display:inline;">

<textarea rows="10" cols="50"></textarea><br />
<div style="float:right;">remaining characters: 300</div>

It is not working开发者_开发百科 in either firefox or IE. The text remaining characters is not within the "inline" bounds instead goes 100% out of the containing div.

what is the best way of accomplish something like this where text is aligned right in parent div with textarea before that?

Try this.

<div style="display:inline; text-align:right; float:left;">
    <textarea cols="50" rows="10"></textarea><br />
    remaining characters: 300
</div>