Put input submit on same line as input box

Question

This is probably simple but I dont know how to do it. Currently with this code the "find" button sits on the line below the input "location" box. How do I get it to sit on the same line to the right like most search boxes work?

HTML

<div class="fieldwrapper">
<input id="field_location" class="field r2" placeholder="Town, City or Postcode" id="Postcode" name="Postcode" type="text" value=""><input type="submit" id="findbutton" value="Find" />
</div>

CSS

field { font-family:arial, sans-serif; border-color: #d9d9d9; border-top:solid 1px #c0c0c0; }
input.field{width:100%}

Link http://jsfiddle.net/VL3Dj/

Answer 1

If you want your text box to be 100% width and a button besides it you can do it like this : My Fiddle

<input type="submit"value="Find" style="float: right" />
<div style="overflow: hidden; padding-right: .5em;">
   <input type="text" style="width: 100%;" />
</div>​

Answer 2

............Demo

Hi now add this css

.fieldwrapper{
white-space: nowrap;
}

Live demo

Answer 3

You only need to know the width of the button for it to work. Then you basically give the input a full width and position absolute the button to the right. The padding is so no text sits behind the button:

    <form method="post" action="">
      <input type="text" name="search-str" id="search-str" value=""/>
      <button type="submit">Submit</button>
    </form>

As for the CSS:

form {
  position: relative;
}

input {
  width: 100%;
  padding-right: 40px;
}

button {
  width: 40px;
  position: absolute;
  top: 0;
  right: 0;
}