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

Possible duplicate: http://stackoverflow.com/q/6938900/681807 — My Head Hurts, Jul 06 '12 at 11:12

Ashwin Singh · Accepted Answer · 2012-07-09T03:31:12.530

5

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.

edited Jul 09 '12 at 03:31

answered Jul 06 '12 at 11:14

Ashwin Singh

7,197
4
36
55

Thank you, Ashwin. Is there a way to butt the input field up with the button? You'll notice that the button still drops below the input field. Should I remove the `width: 450px` declaration? Thanks again – michaelmcgurk Jul 06 '12 at 11:18
@mcgarriers Oops posted the wrong link, changed it, have a look again. http://cssdesk.com/dUjxF – Ashwin Singh Jul 06 '12 at 11:21
your cssdesk link doesnt actually make the input field responsive. Typing in the box, results in the text stopping a portion of thw way accross. Your contained dev is responsive - misleading. – Rhyso Aug 20 '13 at 13:14
The OP is satisfied with the solution. – Ashwin Singh Aug 20 '13 at 14:57

renick · Answer 2 · 2012-07-06T11:25:40.907

4

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

edited Jul 06 '12 at 11:25

answered Jul 06 '12 at 11:14

renick

3,873
2
31
40

Responsive input fields in CSS - fluid width?

2 Answers2

Linked