Uma solução comum para esse problema usa posicionamento absoluto ou flutuadores cortados, mas estes são complicados, pois exigem um ajuste extensivo se as colunas mudarem de número + tamanho e você precisa garantir que a coluna "principal" seja sempre a mais longa. Em vez disso, sugiro que você use uma das três soluções mais robustas:
display: flex: de longe a solução mais simples e melhor e muito flexível - mas não suportada pelo IE9 e versões anteriores.tableou display: table: muito simples, muito compatível (praticamente todos os navegadores de todos os tempos), bastante flexível.display: inline-block; width:50% com um corte de margem negativo: bastante simples, mas as bordas na parte inferior da coluna são um pouco complicadas.
1 display:flex
Isso é realmente simples e fácil de se adaptar a layouts mais complexos ou mais detalhados - mas o flexbox é suportado apenas pelo IE10 ou posterior (além de outros navegadores modernos).
Exemplo: http://output.jsbin.com/hetunujuma/1
Html relevante:
<div class="parent"><div>column 1</div><div>column 2</div></div>
CSS relevante:
.parent { display: -ms-flex; display: -webkit-flex; display: flex; }
.parent>div { flex:1; }
O Flexbox oferece suporte para muito mais opções, mas para ter simplesmente qualquer número de colunas, as opções acima são suficientes!
2. <table>oudisplay: table
Uma maneira simples e extremamente compatível de fazer isso é usar um table- eu recomendo que você tente primeiro se precisar de suporte do IE antigo . Você está lidando com colunas; divs + floats simplesmente não são a melhor maneira de fazer isso (sem mencionar o fato de que vários níveis de divs aninhados apenas para contornar as limitações de css são dificilmente mais "semânticos" do que apenas usar uma tabela simples). Se você não deseja usar o tableelemento, considere cssdisplay: table (não suportado pelo IE7 e mais antigo).
Exemplo: http://jsfiddle.net/emn13/7FFp3/
HTML relevante: (mas considere usar um simples<table>)
<div class="parent"><div>column 1</div><div>column 2</div></div>
CSS relevante:
.parent { display: table; }
.parent > div {display: table-cell; width:50%; }
/*omit width:50% for auto-scaled column widths*/
Essa abordagem é muito mais robusta do que usar overflow:hiddencom flutuadores. Você pode adicionar praticamente qualquer número de colunas; você pode dimensioná- los automaticamente, se quiser; e você mantém a compatibilidade com navegadores antigos. Diferentemente da solução flutuante requer, você também não precisa saber de antemão qual coluna é mais longa; a altura escala muito bem.
BEIJO: não use hacks flutuantes, a menos que você precise especificamente. Se o IE7 for um problema, eu ainda escolheria uma tabela simples com colunas semânticas em vez de uma solução CSS de truque difícil de manter e menos flexível a qualquer dia.
A propósito, se você precisar que seu layout seja responsivo (por exemplo, sem colunas em telefones celulares pequenos), poderá usar uma @mediaconsulta para retornar ao layout de bloco simples para pequenas larguras de tela - isso funciona se você usa <table>ou qualquer outro display: tableelemento.
3. display:inline blockcom uma margem negativa hack.
Outra alternativa é usar display:inline block.
Exemplo: http://jsbin.com/ovuqes/2/edit
HTML relevante: (a ausência de espaços entre asdivtags é significativa!)
<div class="parent"><div><div>column 1</div></div><div><div>column 2</div></div></div>
CSS relevante:
.parent {
position: relative; width: 100%; white-space: nowrap; overflow: hidden;
}
.parent>div {
display:inline-block; width:50%; white-space:normal; vertical-align:top;
}
.parent>div>div {
padding-bottom: 32768px; margin-bottom: -32768px;
}
Isso é um pouco complicado, e a margem negativa significa que a parte inferior "verdadeira" das colunas está obscurecida. Por sua vez, isso significa que você não pode posicionar nada em relação à parte inferior dessas colunas, porque isso é cortado overflow: hidden. Observe que, além dos blocos embutidos, você pode obter um efeito semelhante com os flutuadores.
TL; DR : use flexbox se você puder ignorar o IE9 e mais antigo; caso contrário, tente uma tabela (css). Se nenhuma dessas opções funcionar para você, há invasões de margem negativa, mas elas podem causar problemas estranhos de exibição que são fáceis de serem perdidos durante o desenvolvimento e existem limitações de layout que você precisa conhecer.