[SOLUCIONADO] Ancho de 3 columnas

[cslbcn]

Hola a tod@s.

Quisiera saber si es posible hacer una cosa. Tengo 3 columnas, una a la izquierda (col1), otra en medio (col2) y otra a la derecha (col3). Las columnas col1 y col3 tienen un ancho fijo de 10px. La col2, quiero que ocupe todo el ancho de la página menos 20px, la suma de las anchuras de col1 y col3.

Sé que con JS esto se puede conseguir fácilmente, pero me gustaría saber si con CSS se puede arreglar.

Gracias de antemano!

[pzin]

Flota una columna a la izquierda, otra a la derecha y las dos con el ancho indicado de 10 pixeles. A continuación pones otra columna sin flotar, que tenga un margen lateral de 10 pixeles.

Ahora, yo me pregunto si no preferirás hacer otra cosa. ¿Para qué quieres dos columnas de 10 pixeles? Por el tamaño supongo que será por cuestiones de diseño. Igual sería mejor usar alguna cosa.

[cslbcn]

Las columas laterales son cosa de diseño.

Por lo que me dices, necesitaría indicarle un ancho a la columna del medio, porque sino cogerá 0 por defecto

[pzin]

No, no cogerá cero porque es un elemento de bloque. Un ejemplo: http://jsbin.com/ogovoz/1/edit

Si es por cuestión de diseño y no tienen ninguna funcionalidad y/o contenido, entonces es mejor hacer otra cosa. ¿Qué es lo que le quieres poner a esas columnas laterales?

[cslbcn]

Las columnas laterales son para poner una imagen, para crear como un marco.
Ese ejemplo que me has puesto lo había probado, y esto tambien: http://www.forosdelweb.com/f53/div-i...entaje-760334/

Pero lo malo de ambos ejemplos es que es necesario establecer un height fijo, porque sino se descuadra todo. La idea es que la altura se vaya adaptando según el contenido que haya. He probado el clear:both, pero nada.

[cslbcn]

A esto me refiero. http://jsbin.com/ogovoz/6/edit
Si comentas el height:100px; de div{}, los div laterales cogen alto=0 y el del centro se queda ajustado al texto.

Lo que quisiera conseguir es que las 3 columnas se adaptasen al texto del centro

[pzin]

Si las columnas son para poner una imagen, entonces tienes suficiente con poner una sola columna, con padding lateral de 10 pixeles —o más— y añadir dos fondos a esa columna.

Código CSS:

div#contenedor {
  padding: 0 10px;
  background-image: url(una.png), url(dos.png);
  background-position: top left, top right;
  background-repeat: repeat-y;
}
 

[cslbcn]

Edito.

No conocía esa manera de anidar backgrounds y sus propiedades dentro de un mismo contenedor.

Muchas gracias!!