¿Cómo crear un diseño fluido fluido de 3 columnas?

Question

Busco un diseño CSS 3 columna, con 1 sección fija en el medio y 2 la barra lateral del fluido alrededor de ella:

http://www.uploadup.com/di-UEFI.png

medio tiene 250 píxeles de ancho (por ejemplo) y las barras laterales tienen (como mínimo) 150px de ancho. si el ancho del navegador era superior a 550 px (250 + 300), las barras laterales deberían tener un ancho más largo. (y el medio siempre es 250px)

¿Qué es CSS puede hacerlo? con compatibilidad en todos los navegadores.

nota: Vi this page, pero no sé cómo lo cambio por mi deseo

Answer 1

Usted puede tratar de utilizar inline-block s por ello. Se usan con bastante poca frecuencia, pero a veces son bastante buenos para los diseños.

Por lo tanto, mira esto: http://jsfiddle.net/kizu/UUzE9/ - con inline-block s puedes crear diseños con cualquier cantidad de columnas fijas y fluidas. El algoritmo:

1. Al principio, agrega el relleno igual a la suma de todas las columnas fijas al contenedor. En su caso - 250px.
2. Luego, agrega min-width a la envoltura igual a la suma de todas las columnas de fluido 'min-width.
3. Luego, agrega white-space: nowrap al envoltorio, para que las columnas no salten.
4. Y luego simplemente agregue todas las columnas que necesite.

Si necesita soporte para Internet Explorer 7 y menor, hay algunas cosas adicionales para conocer a excepción de inline-block solución común:

1. usted debe regresar white-space: normal al niño interior de una columna o las columnas ganado Mantente en una línea.
2. Puede aparecer un desplazamiento fantasma en IE, tal vez hay una mejor manera de eliminarlo, pero solo uso overflow: hidden en un envoltorio.

Enjoy :)

Answer 2

Si no se utiliza una de las plantillas listas por ahí,
Puede empezar por tres div flotó a la izquierda, el centro con ancho: 250px y los exteriores con min-width: 150px
es posible que desee reemplazarla con la etiqueta <section>, sólo le dan un display: block

Answer 3

para hacer Thi s trabajo en IE6/7 sin JavaScript, la forma más fácil de hacerlo es con un table.

Lo sé, lo sé. No es que mal en este caso, todos considerados.

Ver:http://jsfiddle.net/thirtydot/Q2Qxz/

Probado en IE6/7 + Chrome, y que sólo funcionará en todos los demás navegadores modernos.

HTML:

<table id="container" cellspacing="0" cellpadding="0"> 
    <tr> 
     <td id="left">fluid</td> 
     <td id="mid">fixed</td> 
     <td id="right">fluid</td> 
    </tr> 
</table> 

CSS:

html, body { 
    margin: 0; 
    padding: 0; 
    border: 0 
} 
#container { 
    border: 0; 
    table-layout: fixed; 
    width: 100% 
} 
#container td { 
    vertical-align: top 
} 
#mid { 
    width: 250px; 
    background: #ccc 
} 
#left { 
    background: #f0f 
} 
#right { 
    background: #f0f 
}