title: Getting button and field on the same line in a fixed width div
body: <p>I have a form. The form contains a text field inside of a div. The button follows the div that contains the text field. By default, the button appears on the next line after the text field. I want to get the button on the same line as the text field.</p>
  
  <p>Initially I floated the div containing the field and the button both to the left, and this worked. However, when I added a fixed width to my left column div (a div that contains everything on the left side of my page, including the aforementioned form) the button went to the next line again.</p>
  
  <p>Why is this? How can I get the button back on the same line as the field?</p>
  
  <p>Here's my form:</p>
  
  <pre><code>&lt;div class="topic_form" style="display: block; "&gt;
    &lt;form accept-charset="UTF-8" action="/videos/507/topic_update" class="edit_video" data-remote="true" id="edit_video_507" method="post"&gt;
    &lt;div style="margin:0;padding:0;display:inline"&gt;
      &lt;input name="utf8" type="hidden" value="✓"&gt;
      &lt;input name="_method" type="hidden" value="put"&gt;
      &lt;input name="authenticity_token" type="hidden" value="0KkgG3U+Kck7SqZTTJ12Td7pLjEN9GEvKEwfRymqN7M="&gt;
    &lt;/div&gt;
    &lt;div class="field"&gt;
  &lt;input class="topic_field ui-autocomplete-input" id="video_topic_names" name="video[topic_names]" size="30" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"&gt;
    &lt;/div&gt;
    &lt;input id="topic_submit" name="commit" type="submit" value="Add Topic"&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I float <code>div.field</code> and <code>input#topic_submit</code> to the left, but this no longer works after adding a fixed width to my left column div.</p>