CSS Inputfield & -button position for questionsystem - html

Question

I have a problem positioning an inputfield with variable size and a post button with fixed size inside of a div with fixed "outer-margin".
I've provided a jfiddle example where you can see the wrong version.
Here you can see my problem:
Wrong version: Actual website
"Should-be" version: This is what it should look like
Textual description:
As you can see in the 2nd picture, it's important for me that the bottom-part always sits on the bottom...
.submitform {
display: block;
position: fixed;
bottom: 0;
...more on jfiddle...
}
... and the post-button always on the right. The bottom-part should have the same gap on the left and right as the upper-part. The difficult thing is, that the inputfield should have flexible size but should take all the space between left gap and post-button.
I hope you can help me because hours of trying and searching on the web didn't brought me the right solution.

Answer 1

Try this: http://jsfiddle.net/jgHAA/1/
.submitform {
background: white;
display: block;
position: fixed;
/* Instead of applying margin and width, simply set the bottom, left,
and right properties to 13px */
bottom: 13px;
left: 13px;
right: 13px;
/*box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);*/
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
padding: 7px;
overflow:hidden;
box-sizing:border-box;
}
to have the textbox fill the width, you can use the same technique: http://jsfiddle.net/jgHAA/2/
.submitform #post_input {
display: block;
font-size: 18px;
border: none;
outline: none;
padding: 3px;
/* set left and right, and z-index to make it appear behind the button.*/
left:7px;
right:7px;
position:absolute;
z-index:-1;
}