Button inside TextArea in HTML

Question

I am looking to create a structure, in which a button is aligned to the top right of a textarea. I was able to do that using CSS positioning. When I start typing inside the textarea, the text comes below the button. Is there a way so that the text normally occupies the full width of the text area, but on reaching the bounds of the button, gets wrapped to the next line?

Answer 1

There is always an option to use contentEditable attribute on an inline element instead of <textarea> and put it next to a floating button.

HTML:

<div>
    <button>press me</button>
    <span contenteditable="true">editable</span>
</div>

CSS:

div {border: 1px solid gray; width: 15em; height: 5em; overflow-y: scroll;}
button {float: right;}

jsFiddle

Answer 2

Fake it. Wrap the textarea and button in a containing div and position the elements. then style the container div to look like the text area. here's a rough mockup http://jsfiddle.net/LEkAJ/

HTML

<div class="container">
  <button>Button</button>
  <textarea>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</textarea>
</div>

CSS

.container {
    position:relative;
    width: 300px;
    height: 100px;
    border: 1px solid #ddd;
}
button {
    position:absolute;
    top: 3px;
    right:3px;
    width: 60px;
}
textarea {
    position:relative;
    border:none;
    width:232px;
    height: 95px;
    resize: none;
    outline: none; /* add this to stop highlight on focus */
}