Como definir divs de largura dinâmica

Question

Aqui está o meu cenário. Eu tenho uma div contêiner que tem (n) elementos filhos dentro dele. Para este exemplo, digamos que existem 2 divs dentro do contêiner div:

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

O DIV contêiner será uma porcentagem da visualização, digamos 80%. Agora, o que estou procurando é que essas duas divs internas (col1 e col2) estejam em linha e ocupem a mesma quantidade de espaço. Portanto, o resultado deve parecer algo assim:

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

Ou se a largura do contêiner for alterada, resultar em algo assim:

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

As divs internas têm sempre a mesma largura e têm alguma separação uma da outra. Isso é semelhante a um layout de tabela, mas eu prefiro não usar tabelas, se possível. Eu tentei várias técnicas, como flutuar e exibir o DIVS em linha sem sucesso. Eles nunca podem parecer alinhados exatamente.

Answer 1

As células da tabela podem se esticar automaticamente. Não é exatamente possível com div, então você deve especificar a largura apropriada para cada coluna manualmente. Por exemplo:

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

Answer 2

Faça col1 e col2 se estendem (não divs) com

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

Obviamente (ajuste a largura para explicar suas margens/preenchimento. E recomendou que você use porcentagens para margens/preenchimento, para que elas aumentem pouco menos de 100%, veja:http://ejohn.org/blog/sub-pixel-problems-in-css/)

Answer 3

Minha solução preferida

Use o posicionamento em relação ao recipiente externo:

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

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

#col2  
{
     right: 2%;
}

#container > div 
{
     width: 47%;
}

Observe que você deixa aproximadamente os mesmos 2% no meio. o #col1 e #col2 deve estar alinhado agora.

Outras soluções

Com CSS3: Use column-count: 2 e quebrar a coluna após o primeiro div.

Se você realmente sentir vontade de flutuar, faça apenas #col1 { float: left; width: 50%; }

Answer 4

#container{
overflow: hidden
} 

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

Answer 5

Talvez o uso de display: table; ajudaria? http://jsfiddle.net/g4dgz/119/