Struggling with an auto stretch search field using CSS

Question

I have been struggling for the last few hours trying to get this search field to stretch with the browser (such as amazon.com).

I have tried various things found on google such as making the input field or parent container 100%, overflow...etc, but I can't seem to get it :/

Also I tried floating the categories right, and it swapped places with the submit button.

Any idea where i'm going wrong?

http://jsfiddle.net/SkinnyGeek1010/RzHWA/

Answer 1

This might be a situation where you might need to use a table, if you wish to have the job done. Using a form containing a one-row table, divide the contents to three cells, with the input field in the middle cell. Set the table width and the middle cell width to 100% and the input field width to something like 98% (try 100% and you’ll see why it needs to be slightly reduced). Oh, and prevent line breaks inside cells.

A sketchy demo of concept: http://jsfiddle.net/yucca42/hyEPu/

If your company police forbids tables for layout, try telling them this is a data table. Failing that, you could simulate the table using display: table etc. in CSS (though this gets more complicated and will fail on old versions of IE).