static width for button, and rest for textarea - html

Question

Hello I have created two divs, one is floated to the left (button), and has 120px width, and another one is for textarea, textarea should be margin-left: 20px and take rest of the width. How much ever I try, I am not able to achieve this. Guys, do you know the solution?
<div id="button" style="float: left; width: 120px; height: 80px;">
<input type="button" id="button" value="something" />
</div>
<div id="textarea" style="margin-left: 20px;">
<textarea id="message"></textarea>
</div>

Answer 1

(For IE8 use #ID named DIVs instead of nth-child)
DEMO
|-------- 120 --------| 20 |------ available space ----------------------------------------------------------->
<div id="formArea">
<div>
<input type="button" value="something" />
</div>
<div>
<textarea></textarea>
</div>
</div>
#formArea{
display:table;
width:100%;
}
#formArea>div{
display:table-cell;
vertical-align: top;
}
#formArea>div:nth-child(1){
width:120px;
}
#formArea>div:nth-child(2){
padding-left:20px; /* instead of margin */
}
#formArea textarea{
border:0;
width:100%;
}
And remember, ID must be unique-per-page.

Answer 2

Try this:
CSS
.left{
float:left;
width:120px;
}
.right{
overflow:hidden;
margin-left:20px;
}
#message{
width:100%;
}
HTML
<div class="left">
<input type="button" id="button" value="something" />
</div>
<div class="right">
<textarea id="message"></textarea>
</div>
fiddle

Answer 3

Let's give this one a try... Below is the code you have given us but with a few enhancements:
<div id="container">
<div class="left">
<input type="button" id="button" value="something" />
</div>
<div class="right">
<textarea id="message"></textarea>
</div>
</div>
And the following is the CSS I have attached:
.left {
width: 120px;
float:left;
}
.right {
float:right;
}
#message{
width:400px;
}
#container {
display:inline-block;
}
Now, what I have done is set all of your current divs into one main div, which can hold everything together. I implemented a display:inline-block to help keep everything on one line along with maintaining the text area to be on the right and the button on he left with the cushion you have asked for in-between. To get a better idea of what this does, I have recreated an already done JsFiddle, which can accurately depict what I am describing.
A few things to note, remember that "textarea" can have the values of "rows" and "cols" which will determine how many rows and columns the text area will be, so you really do not need to have width in this aspect, especially if you need more rows vs columns.
Another thing, if you want to learn a bit more conceptually about some CSS tricks, the Almanac is one of the better tools out there to help you understand "why this does that".
Last, I encourage you to play with everybody's JsFiddle to get a better understanding of exactly what you want to see in your own code, every answer that has been presented has their own unique JsFiddle.
If this does not work or you have questions, comment below and we can figure something else out :)
Good luck with your future HTML/CSS coding adventures :)