Divida a div em 2 colunas usando CSS

89

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!

PF1
fonte
2
Existem tantas soluções, você pode ver isto: stackoverflow.com/questions/211383/…
enmaai

Respostas:

60

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.

Rob Van Dam
fonte
16
É uma pena que isso tenha sido votado tantas vezes. Você realmente deve evitar marcações estranhas, especialmente considerando que existem outros remédios viáveis ​​e amplamente usados.
Jbird
89

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>
Navish
fonte
3
Se isso for tudo o que você fizer, o pai desses elementos não terá altura.
tybro0103
Fácil e eficaz. Obrigado!
Alexis Gamarra
47

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.

tybro0103
fonte
1
Eu encorajo os leitores a verificar minha outra resposta também. Eu acho que é realmente melhor do que este.
tybro0103
1
mais uma observação: overflow:auto;às vezes pode ser uma opção melhor
tybro0103
Este é definitivamente um meio eficaz. No entanto, vale a pena mencionar que isso pode criar alguns desafios de layout óbvios. Por exemplo, se eu quiser que o estouro do meu elemento pai seja visível.
Jbird
16

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.

tybro0103
fonte
Também é uma ótima solução, mas vale a pena mencionar aqui que não funciona no IE8. Realmente me dói ser o único a dizer isso e peço desculpas por ser "aquele cara".
Jbird
@Jbird try #content:after(apenas um dois-pontos em vez de dois) ... Se bem me lembro, é mais apropriado usar dois pontos-e-vírgulas para pseudoelementos, mas os IEs mais antigos só os reconhecem se houver um. ... ou algo parecido - já faz algum tempo que não lidei com esse problema.
tybro0103
10

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.

Rodney P. Barbati
fonte
9

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


fonte
8

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

Oriol
fonte
Eu também prefiro esse método ao invés de flutuar. Às vezes, é necessário definir um: vertical-align: top; (ou inferior, etc.) nos elementos esquerdo e direito se eles não forem do mesmo tamanho.
James
4

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;
}
Dexter
fonte
3

Melhor maneira de dividir um div verticalmente -

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

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>

Mohammad Usman
fonte
1
Em um zilhão de tentativas semelhantes, acho que isso funcionou (até agora) como o melhor. Todos os outros que encontrei (e tentei) permitem que o conteúdo transborde . Muito obrigado.
user12379095
1

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.

Gazzer
fonte
0

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.

Jbird
fonte
0
  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.

Berezh
fonte
Embora este trecho de código possa resolver a questão, incluir uma explicação realmente ajuda a melhorar a qualidade de sua postagem. Lembre-se de que você está respondendo a pergunta para leitores no futuro, e essas pessoas podem não saber os motivos de sua sugestão de código.
msrd0
0

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.

Rashid Jorvee
fonte
Por favor, adicione mais algumas informações com tags relevantes.
Aman Garg de
espero que este código ajude você a entender isso de uma maneira melhor; @AmanGarg CSS: #column { overflow:auto; width: 100%; } #column50pleft, #column50pright{ width: 49%; margin:2px; padding: 0.5%; background: white; } #column50pleft { float:left; } #column50pright { float:right; } HTML: <div id="column"> <div id="column50pleft"> </div> <div id="column50pright"> </div> </div>
Rashid Jorvee