Divida a div em 2 colunas usando CSS

Tenho tentado dividir um div em duas colunas usando CSS, mas ainda não consegui fazê-lo funcionar. Minha estrutura básica é a seguinte:

<div id="content">
  <div id="left">
     <div id="object1"></div>
     <div id="object2"></div>
  </div>

  <div id="right">
     <div id="object3"></div>
     <div id="object4"></div>
  </div>
</div>

Se eu tentar flutuar os divs direito e esquerdo para suas respectivas posições (direita e esquerda), parece ignorar a cor de fundo do div de conteúdo. E outro código que tentei em vários sites não parece ser capaz de traduzir para a minha estrutura.

Obrigado por qualquer ajuda!

Quando você flutua esses dois divs, o div do conteúdo cai para a altura zero. Basta adicionar

<br style="clear:both;"/>

após o div #right, mas dentro do div de conteúdo. Isso forçará o div de conteúdo a envolver os dois divs flutuantes internos.

Isso funciona bem para mim. Eu dividi a tela em duas metades: 20% e 80%:

<div style="width: 20%; float:left">
   #left content in here
</div>

<div style="width: 80%; float:right">
   #right content in there
</div>

Outra maneira de fazer isso é adicionar overflow:hidden;ao elemento pai dos elementos flutuantes.

overflow: hidden fará o elemento crescer para caber em elementos flutuantes.

Dessa forma, tudo pode ser feito em css em vez de adicionar outro elemento html.

A maneira mais flexível de fazer isso:

#content::after {
  display:block;
  content:"";
  clear:both;
}

Isso age exatamente da mesma forma que anexar o elemento a #content:

<br style="clear:both;"/>

mas sem realmente adicionar um elemento. :: after é chamado de pseudo elemento. A única razão pela qual isso é melhor do que adicionar overflow:hidden;a #content é que você pode ter um estouro de elementos filho posicionados de forma absoluta e ainda estar visível. Também permitirá que as sombras da caixa ainda sejam visíveis.

Nenhuma das respostas dadas responde à pergunta original.

A questão é como separar um div em 2 colunas usando css.

Todas as respostas acima incorporam 2 divs em um único div para simular 2 colunas. Esta é uma má ideia porque você não conseguirá fluir o conteúdo nas 2 colunas de forma dinâmica.

Portanto, em vez do acima, use um único div que é definido para conter 2 colunas usando CSS da seguinte maneira ...

.two-column-div {
 column-count: 2;
}

atribua o acima como uma classe para um div, e ele irá realmente fluir seu conteúdo para as 2 colunas. Você pode ir além e definir lacunas entre as margens também. Dependendo do conteúdo do div, você pode precisar mexer com os valores de quebra de palavra para que seu conteúdo não seja dividido entre as colunas.

Por alguma razão que nunca gostei das abordagens de compensação, eu confio em flutuações e larguras de porcentagem para coisas como esta.

Aqui está algo que funciona em casos simples:

#content { 
  overflow:auto; 
  width: 600px; 
  background: gray; 
} 

#left, #right { 
  width: 40%; 
  margin:5px; 
  padding: 1em; 
  background: white; 
} 

#left  { float:left;  }
#right { float:right; } 

Se você colocar algum conteúdo, verá que funciona:

<div id="content">
  <div id="left">
     <div id="object1">some stuff</div>
     <div id="object2">some more stuff</div>
  </div>

  <div id="right">
     <div id="object3">unas cosas</div>
     <div id="object4">mas cosas para ti</div>
  </div>
</div>

Você pode vê-lo aqui: http://cssdesk.com/d64uy

Faça divs filhos inline-blocke eles se posicionarão lado a lado:

#content {
   width: 500px;
   height: 500px;
}

#left, #right {
    display: inline-block;
    width: 45%;
    height: 100%;
}

Veja a demonstração

Sei que esse post é antigo, mas se algum de vocês ainda está procurando uma solução mais simples.

#container .left,
#container .right {
    display: inline-block;
}

#container .left {
    width: 20%;
    float: left;
}
#container .right {
    width: 80%;
    float: right;
}

Melhor maneira de dividir um div verticalmente -

#parent {
    margin: 0;
    width: 100%;
}
.left {
    float: left;
    width: 60%;
}
.right {
    overflow: hidden;
    width: 40%;
}

Você pode usar o flexbox para controlar o layout do seu elemento div:

* { box-sizing: border-box; }

#content {
  background-color: rgba(210, 210, 210, 0.5);
  border: 1px solid #000;
  padding: 0.5rem;
  display: flex;
}

#left,
#right {
  background-color: rgba(10, 10, 10, 0.5);
  border: 1px solid #fff;
  padding: 0.5rem;
  flex-grow: 1;
  color: #fff;
}

<div id="content">
  <div id="left">
     <div id="object1">lorem ipsum</div>
     <div id="object2">dolor site amet</div>
  </div>

  <div id="right">
     <div id="object3">lorem ipsum</div>
     <div id="object4">dolor site amet</div>
  </div>
</div>

Flutuadores não afetam o fluxo. O que costumo fazer é adicionar um

<p class="extro" style="clear: both">possibly some content</p>

no final do 'div de envolvimento' (neste caso, conteúdo). Posso justificar isso em uma base semântica, dizendo que tal parágrafo pode ser necessário. Outra abordagem é usar um CSS Clearfix:

#content:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

#content {
  display: inline-block;
}
/*  \*/
* html #content {
  height: 1%;
}

#content {
  display: block;
}
/*  */

O truque com os comentários é para compatibilidade entre navegadores.

Isso é melhor respondido aqui Questão 211383

Hoje em dia, qualquer pessoa que se preze deve usar a abordagem declarada de "micro-clearfix" para compensar flutuadores.

1. Faça o tamanho da fonte igual a zero no DIV pai.

2. Defina a porcentagem de largura para cada um dos DIVs filhos.

   #content {
       font-size: 0;
   }
   
   #content > div {
       font-size: 16px;
       width: 50%;
   }

* No Safari, pode ser necessário definir 49% para que funcione.

Dividir uma divisão em duas colunas é muito fácil, apenas especifique melhor a largura da sua coluna se você colocar isso (como largura: 50%) e defina o float: left para a coluna da esquerda e float: right para a coluna da direita.