diseño web de tres columnas con lados variables

Question

He estado tratando de encontrar una manera de crear un diseño web de 3 columnas donde la columna central tenga un ancho constante y siempre esté centrada.Las columnas de la izquierda y la derecha son variables.Esto es trivial en las tablas, pero no correcto semánticamente.No he podido hacer que esto funcione correctamente en todos los navegadores actuales.¿Algún consejo sobre esto?

Answer 1

Usar esta tecnica, y simplemente especifique un ancho fijo para la columna central.

Answer 2

Mira esto: http://www.glish.com/css/2.asp

Y reemplaza el ancho:xx% para #maincenter por un valor fijo.Parece funcionar cuando lo cambio con Firebug, ¿vale la pena intentarlo?

#maincenter {
    width: 200px;
    float:left;
    background:#fff;
    padding-bottom:10px;
    }

Answer 3

Creo que necesitarías comenzar con anchos iniciales (fijos) para ambas columnas de la barra lateral y luego, cuando se cargue la página, usar javascript para obtener el ancho de la ventana y calcular el nuevo ancho de las barras laterales.

ancho de la barra lateral = (ancho de la ventana - ancho de la columna central) / 2

Luego podría volver a aplicar JavaScript si se cambia el tamaño de la ventana.

Answer 4

Este artículo en A List Apart tiene una solución que da como resultado un diseño de 3 columnas que:

• tener un centro fluido con barras laterales de ancho fijo,

• permitir que la columna central aparezca primero en la fuente,

• permitir que cualquier columna sea la más alta,

• requieren solo un div adicional de marcado, y

• Requiere CSS muy simple, con parches mínimos.