Luchando con un campo de búsqueda de estiramiento automático usando CSS

Question

He estado luchando durante las últimas horas tratando de hacer que este campo de búsqueda se estire con el navegador (como Amazon.com).

He probado varias cosas que se encuentran en Google, como hacer el campo de entrada o el contenedor principal del 100%, desbordamiento ... etc., pero parece que no puedo obtenerlo:/

También intenté flotar las categorías correctamente, y cambió los lugares con el botón Enviar.

¿Alguna idea de dónde me equivoco?

http://jsfiddle.net/skinnygeek1010/rzhwa/

Answer 1

Esta podría ser una situación en la que pueda necesitar usar una mesa, si desea hacer el trabajo. Usando un formulario que contiene una tabla de una fila, divida el contenido en tres celdas, con el campo de entrada en la celda media. Establezca el ancho de la tabla y el ancho de la celda media al 100% y el ancho del campo de entrada en algo así como 98% (intente 100% y verá por qué debe reducirse ligeramente). Ah, y evite las roturas de la línea dentro de las celdas.

Una demostración incompleta de concepto: http://jsfiddle.net/yucca42/hyepu/

Si la policía de su empresa prohíbe el diseño de tablas, intente decirles que esta es una tabla de datos. De lo contrario, podría simular la tabla usando display: table etc. en CSS (aunque esto se vuelve más complicado y fallará en versiones antiguas de IE).