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!
Respostas:
Quando você flutua esses dois divs, o div do conteúdo cai para a altura zero. Basta adicionar
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.
fonte
Isso funciona bem para mim. Eu dividi a tela em duas metades: 20% e 80%:
fonte
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.
fonte
overflow:auto;
às vezes pode ser uma opção melhorA maneira mais flexível de fazer isso:
Isso age exatamente da mesma forma que anexar o elemento a #content:
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.fonte
#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.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 ...
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.
fonte
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:
Se você colocar algum conteúdo, verá que funciona:
Você pode vê-lo aqui: http://cssdesk.com/d64uy
fonte
Faça divs filhos
inline-block
e eles se posicionarão lado a lado:Veja a demonstração
fonte
Sei que esse post é antigo, mas se algum de vocês ainda está procurando uma solução mais simples.
fonte
Melhor maneira de dividir um div verticalmente -
fonte
Você pode usar o flexbox para controlar o layout do seu elemento div:
fonte
Flutuadores não afetam o fluxo. O que costumo fazer é adicionar um
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:
O truque com os comentários é para compatibilidade entre navegadores.
fonte
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.
fonte
Defina a porcentagem de largura para cada um dos DIVs filhos.
* No Safari, pode ser necessário definir 49% para que funcione.
fonte
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.
fonte
#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>