a question about layouting a submit button - css

Question

i have a layout problem.
i have this sample code:
<div class="frame"><div class="holder"><form class="newform">...<div class="button"><input type="submit"></div></form></div></div>
And this stylesheet:
form.newform{border:1px solid orange}
div.button{border:1px solid red;width:100%;position:relative;overflow:hidden;}
Now the submit button (red-box) will be displayed at the bottom of the form (orange-box). But i like to display it AFTER (eg. 10px after bottom line) the orange-box.
Maybe someone can help me to solve this problem.
Best regards
Tim
Edit:
This is the complete css part of form.newform
overflow:hidden;
height:1%;
background:url(../images/contentform.gif) repeat-y;
padding:0 0 2px;
border:1px solid orange;
i tried to add bottom:-10px; to the div.bottom but the submit button will be cut at the bottom line of the form. Adding a z-index:200 wont help.

Answer 1

One option would be to use CSS to specifically shift the position of the submit button. I've made up the below so it will probably look completely wrong, but play around with it.
HTML:
<input type="submit" id="submitbutton">
CSS:
#submitbutton {
position: relative;
bottom: -50px;
}

Answer 2

You cannot have a submit button outside the form element, it needs to be inside.
If you want two boxes, one orange and one red, with the orange one containing the form input fields and the red one containing the submit button, you should do something like this:
<div class="frame">
<form class="newform">
<div class="holder">
...
</div>
<div class="button">
<input type="submit">
</div>
</form>
</div>
And in your css
.holder { border:1px solid orange; }
.button { border:1px solid red; margin-top:10px; }