Submit button not cooperating - html

Question

I am sure this is a complete oversight on my part, but I have a button I would like to the immediate right of an input box, my html is:
<input type="text" name="q" id="search" />
<input type="submit" name="submit" id="submit" value="Go!" />
and css is:
#main input {
margin: 30px auto auto 130px ;
positiom: absolute;
font-size: 18px;
background: #fff;
border: 3px;
padding: 6px;
z-index: 3;
}
#search {
float: left;
width: 550px;
}
#submit {
width: 60px;
}
#submit::-moz-focus-inner {
border: 0;
padding: 0;
}
The Go! button just sits directly below the left side of the submit box and any kind of margin tweaking is in vain bc it just stays there. Also tried making the position absolute and the button overlaps.
The Go! button will not position correctly - it is supposed to be to the right of my input box but it hangs below it instead.
How can I get it to position directly to the right my input box?
Thanks for any help!
EDIT:
html{
background: url(images/bg5.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#main{
width: 875px;
height: 350px;
background: url(images/form3.png) 0 0 no-repeat;
margin:250px auto;
z-index: 1;
}
#main form {
width: 850px;
height: 191px;
background: url(images/logo3.png) 0 0 no-repeat;
margin: -165px auto auto -90px;
position: absolute;
z-index: 2;
}
#text {
font-size: 30px;
color: #ffffff;
font-family: parisjetaime;
margin: 189px auto auto 130px ;
line-height: 30px;
}
#main input {
margin: 30px auto auto 130px ;
font-size: 18px;
background: #fff;
border: 3px;
padding: 6px;
z-index: 3;
}
#search {
width: 550px;
}
#submit {
width: 60px;
float: right;
}
#submit::-moz-focus-inner {
border: 0;
padding: 0;
}

Answer 1

Not sure if this is where your problem is, but it seems that by taking out margin: 130px auto auto 200px ; from #submit the Go! button is properly placed on the right of the search box.
Demo:
http://jsfiddle.net/3ykRD/
Edit
Solution: http://jsfiddle.net/H3gYM/1/
The #main input properties were overriding the #submit properties - in this case the margins are what made the Go! button be displaced. Placing !important cancels the override and then tweaking the margins fixed the problem.

Answer 2

Why absolutely position your inputs? Here is a slightly trimmed down code which will put them next to each-other. The float:left was causing the height dis-joint because it causes the two elements to no longer be in the same 'line'
#main input {
font-size: 18px;
background: #fff;
border: 3px;
padding: 6px;
z-index: 3;
}
#search {
width: 550px;
}
#submit {
width: 60px;
}
#submit::-moz-focus-inner {
border: 0;
padding: 0;
}

Answer 3

I think what you want is to place the button just right to the text box, right? If so You need to float the input button and the textbox to left too;
#textbox {
float: left;
}
#submit {
width: 60px;
float: left;
}
This always work for me :) Let me know if it worked!