Solución:
EDITAR:
Esos tres elementos diferentes tienen reglas de representación diferentes.
Entonces para:
table#bar debe establecer el ancho al 100%; de lo contrario, solo será tan ancho como determine que debe ser. Sin embargo, si el ancho total de las filas de la tabla es mayor que el ancho de bar se expandirá a su ancho necesario. SI recuerdo, puedes contrarrestar esto estableciendo display: block !important; aunque ha pasado un tiempo desde que tuve que arreglar eso. (Estoy seguro de que alguien me corregirá si me equivoco).
textarea#bar Creo que es un elemento de nivel de bloque, por lo que seguirá las mismas reglas que el div. La única advertencia aquí es que textarea tomar atributos de cols y rows que se miden en columnas de caracteres. Si esto se especifica en el elemento, anulará el ancho especificado por el css.
input#bar es un elemento en línea, por lo que por defecto no puede asignarle ancho. Sin embargo, al igual que textarea‘s cols atributo, tiene un size atributo en el elemento que puede determinar el ancho. Dicho esto, siempre puede especificar un ancho usando display: block; en su css para ello. Entonces seguirá las mismas reglas de renderizado que el div.
td#foo se renderizará como un table-cell que tiene algo de locura. La conclusión aquí es que, para sus propósitos, actuará como div#foo en cuanto a restringir el ancho de su contenido. El único problema aquí será el posible texto no envolvente en la columna en algún lugar, lo que lo haría ignorar su configuración de ancho. Además, todas las celdas de la columna obtendrán el ancho de la celda más ancha.
Ese es el comportamiento predeterminado del elemento de nivel de bloque, es decir. si el ancho es auto (el valor predeterminado) entonces será el 100% del ancho interno del elemento contenedor. entonces en esencia:
#foo {width: 800px;}
#bar {padding-left: 2px; padding-right: 2px; margin-left: 2px; margin-right: 2px;}
te dará exactamente lo que quieres.
casi ahí, solo cambia outerWidth: 100%; para width: auto; (externalWidth no es una propiedad de CSS)
alternativamente, aplique los siguientes estilos a la barra:
width: auto;
display: block;
Usa los estilos
left: 0px;
o y
right: 0px;
o y
top: 0px;
o y
bottom: 0px;
Creo que para la mayoría de los casos eso funcionará