3 columnas, medio con ancho flexible

Question

Me gustaría tener un diseño que consta de tres divs adyacentes. Los separadores laterales tienen ancho estático (puede cambiar a través de javascript) y el centro div llena el área restante. Cuando cambia el tamaño del primer div, solo afecta al central. Es similar a la tabla (con representación dinámica) que consta de tres columnas.

Bien, pero ¿dónde está el problema. El problema es que si pongo div flotante en la primera columna y bloqueo div en la segunda y tercera, los div divs se comportan de una manera extraña. Se representan en su columna debajo del div flotante de la primera columna.

Un ejemplo. En la primera y segunda columna tengo div flotante y bloque div en la tercera columna. El bloque div se desplaza hacia abajo alrededor de la altura de los divs flotantes. Div en la columna central no se desplaza en su posición y solo que tiene flotante propiedad izquierda.

Me gustaría que cada uno de los tres divisores de mapeo sean independientes entre sí. No tengo idea de por qué los elementos en la tercera columna flotan div en las primeras dos columnas (con propiedad float).

CÓDIGO:

<div style="margin: auto; display: table; width: 260px;"> 
     <div style="display: table-row;"> 
      <div style="display: table-cell; width: 100px;"> 

       <div style="float: left; width: 40px; height: 50px;">COL1</div> 

      </div> 
      <div style="display: table-cell;"> 

       <div style="float: left; height: 50px; width: 40px;">COL2</div> 

      </div style="display: table-cell; width: 100px;"> 
      <div class="sideContainer"> 

       <div>COL3</div> 

      </div> 
     </div> 
</div> 

y resultado: result

cómo arreglar eso. Cómo hacer que todos los divs de maquetación (columnas) sean independientes entre sí. ¿Algunas ideas?

Answer 1

Puede hacerlo colgando col1 y col3 a la izquierda y a la derecha, con un ancho fijo.

A continuación, agregue un margen izquierdo y derecho a col2 igual al ancho de col1 y col3.

Esto le da tres columnas; col1 y col3 que tiene una anchura fija y col2 llenar la anchura disponible:

(cuadro de contenido de col2 en azul, y sus márgenes en amarillo)

<div class='container'> 
    <div class='right'> 
     col3 
    </div> 
    <div class='left'> 
     col1 
    </div> 
    <div class='middle'> 
     col2 
    </div> 
</div> 



.container { 
    overflow: hidden; 
} 
.right { 
    float: right; 
    width: 100px; 
} 
.left { 
    float: left; 
    width: 100px; 
} 
.middle { 
    margin: 0 100px; 
} 

probar aquí: http://jsfiddle.net/22YBU/

BTW si necesita visualizar: tabla, mostrar: tabla-fila y mostrar: tabla-celda, usar una tabla ;-)