css textbox with a floating button beside it

I'm working on a mobile template for my site and I want a textbox inside a div to be width:100% with an html submit button beside it, however the button always seems to wrap to the second line. Can someone help me out with some CSS for this?

<style type="text/css">
    .form_input {}
    .form_submit{}
</style>

<div>
    <input type="text" name="s" value="" class="form_input" />
    <input type="submit" val开发者_开发技巧ue="Search" class="form_submit" />
</div>

The wrapping happens because of the workings of the css box model. 100% means 100% of the context box. So the input field will fill the line completely -> the submit button has to wrap to the next line. You can give the input box a width of e.g. 80% and the submit button a width of 20%.

I guess what you really want to do is something like input{ width: 100% - 200px }, submit {width: 200px}. That is not possible with css2.

Set the div to position:relative; and then set both the textbox and submit button to absolute position:

div.box{ position:relative; }

input[type="text"]{position:absolute;left:0;top:0;}
input[type="submit"]{positon:absolute;right:0;top:0;}

If you set the textbox to width: 100%;, then it will take up all the space available, and always push the submit button down.

This code specifies a width for both input elements:

.form_input {
  width: 70%;
}
.form_submit{
  width: 20%;
}

and they will be on the same line. (70% + 20% = 90% because I've left a little room for margins.)