Responsive input fields in CSS - fluid width?

Question

I'm trying to make the following sign up box fluid responsive in CSS.

Here is an example: http://cssdesk.com/aYLwW

I would like the input field width to be "flexible" and shrink depending on the page.

You can see from the example when I shrink the window, the button eventually drops down below the input field.

With this in mind, what should I set my input#iiihuu-iiihuu field width to be to allow the input field to gracefully resize without any bumpage?

Many thanks for any pointers :-D

Answer 1

Give a min-width:550px; to the div containing the text-box and button. Your control will not break then.

Working ex. here http://cssdesk.com/dUjxF

As the definition says min-width sets a min-width to the element, it doesn't go below that size under any circumstances.

Answer 2

You can change the css widths to percent based. See here