Cómo establecer DIVs Dinámico Ancho

Question

Aquí está mi escenario. Tengo un div contenedor que tiene elementos (n) niño en su interior. Para este caso, digamos que hay 2 divs dentro del contenedor div:

<div id="container">
    <div id="col1">
        Stuff in col1
    </div>
    <div id="col2">
        Stuff in col2
    </div>
</div>

El contenedor div va a ser un porcentaje de la ventana, por ejemplo 80%. Ahora, lo que estoy buscando es para estos dos divs interiores (col1 y col2) para estar en línea con los demás y tomar la misma cantidad de espacio. Así, el resultado debería ser algo como esto:

+-------------- container -------------+
|  +---- col1 ----+  +---- col2 ----+  |
|  | stuff in     |  | stuff in     |  |
|  | col1         |  | col2         |  |
|  +--------------+  +--------------+  |
+--------------------------------------+  

O si el ancho de contenedores se cambia debe dar lugar a algo como esto:

+------------------------------ container -----------------------------+
|  +------------ col1 ------------+  +------------ col2 ------------+  |
|  | stuff in col1                |  | stuff in col2                |  |
|  | stuff in col1                |  | stuff in col2                |  |
|  +------------------------------+  +------------------------------+  |
+----------------------------------------------------------------------+

Los divs interiores son siempre de igual anchura y tienen una cierta separación entre sí. Esto es similar a un diseño de tabla, pero yo preferiría no utilizar tablas si es posible. He intentado varias técnicas como flotando y la visualización de los divs en línea en vano. Ellos nunca parecen poder alinear a la perfección.

Answer 1

células mesa podría estirar automáticamente. No es exactamente posible con div, así que hay que especificar el ancho apropiado para cada columna a mano. Por ejemplo:

#col1, #col2 {
    float: left;
    width: 50%;
}

Answer 2

hacer col1 y col2 vanos (no divs) con

vertical-align:top
display:inline-block
width:50%

Obviamente (ajustar el ancho de dar cuenta de sus márgenes / relleno y se recomienda utilizar porcentajes de márgenes / relleno de modo que se suman a poco menos de 100%. Véase: http://ejohn.org/blog/sub-pixel-problems-in-css/ )

Answer 3

Mi solución preferida

Uso de posicionamiento en relación con el recipiente exterior:

#container, #container > div  
{
    position: relative;
}

#col1  
{
     left: 2%; /* your margin */
}

#col2  
{
     right: 2%;
}

#container > div 
{
     width: 47%;
}

Tenga en cuenta que deja aproximadamente el mismo 2% en el medio. El #col1 y #col2 deben alinearse ahora.

Otras soluciones

Con CSS3: utilizar column-count: 2 y romper la columna después de la primera div.

Si realmente se siente como si flotara, hacer solamente #col1 { float: left; width: 50%; }

Answer 4

#container{
overflow: hidden
} 

#col1, #col2 {
    float: left;
    width: 50%;
}

Answer 5

Tal vez el uso de display: table; ayudaría? http://jsfiddle.net/g4dGz/119/