CSS issue with form btn moving when resized - html

Question

I am having a bit of trouble getting a form btn to stay to the right of its associated form input. It is fine when the browser is an appropriate size, however, when the browser is reduced, this btn moves onto a line below the input rather than staying to the left. I have tried pretty much everything I can think of, but I cant stop it from moving when the window is shrunk.
Any help would be greatly appreciated.
Here is the css:
#footer-newsletter form {
display: block;
vertical-align: baseline;
}
#footer-newsletter input {
display: inline;
width: 231px;
height: 19px;
background: #202020;
border:0;
margin:0;
padding:10px;
color: #A5A5A5;
font-size: 0.85em;
font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
-webkit-transition:background .3s ease-in-out;
-moz-transition:background .3s ease-in-out;
transition:background .3s ease-in-out;
float:left;
border-radius:0
}
#footer-newsletter button {
display: inline;
width:39px;
float:right;
height:39px;
text-indent:-9999em;
background:#202020 url(images/newsletter_arrow.png) no-repeat center center;
border:0;
margin-left:1px;
-webkit-transition:background .3s ease-in-out;
-moz-transition:background .3s ease-in-out;
transition:background .3s ease-in-out;
}
Here is the html:
<!-- BEGIN .four columns right #footer-newsletter -->
<div class="four columns right" id="footer-newsletter">
<h3>Newsletter</h3>
<p>Occasional email updates, no spam</p>
<form id="newsletter" method="post" action="http://innervisionsoftware.co.uk/wp-content/plugins/newsletter/do/subscribe.php" onsubmit="return newsletter_check(this)">
<input id="email" type="email" name="newsletter" value="Your email address" required>
<button type="submit">Submit</button>
</form>
</div>
<!-- END .four columns right #footer-newsletter -->
The container is merely a pecentage width of the larger container which is 100%.
I would usually put this code on a live site for the purposes of this question, but I cant access the usual sites from this network, so sorry about that.
Any help would be greatly appreciated.

Answer 1

It goes below because it's floated.
You have fixed width for your input and button so you can set a min-width to the container:
#footer-newsletter form {
min-width:295px;
}
An example http://jsfiddle.net/zX3F4/1/

Answer 2

Give it's parent (form#newsletter) a minimum width, when the screen size gets smaller than that size, the scrollbars will appear.
#newsletter { min-width: 300px; } /*adjust to your needs */