Um HTML ou divisão é um elemento em nível de bloco projetado para não exibir nenhum elemento HTML próximo a ele, a menos que seu comportamento padrão seja alterado. Abaixo estão todos os diferentes métodos para evitar que um div divida para a próxima linha.

Dica: Dependendo do motivo pelo qual você deseja dividir um div, convém também considerar o uso de uma tag, que é um elemento de nível in-line e não quebra para a próxima linha, a menos que seu comportamento padrão seja alterado.

Nota: Para tornar esses exemplos mais fáceis de usar e entender para todos os tipos de usuários de computador, estamos usando o atributo style na div. Se você pretende usar qualquer um desses exemplos em várias páginas, recomendamos criar um arquivo CSS com cache com as configurações de estilo no arquivo.

Em nossos exemplos abaixo, mostraremos os divs como cores diferentes para ajudar a ilustrar quanto espaço o div está ocupando e onde na tela o div é colocado.

Comportamento Padrão

Abaixo está um exemplo do comportamento div padrão do elemento de bloco Div one ocupando a primeira linha de seu elemento contendo seguido pelo segundo Div dois .

Uma div

Div dois

 Div one Div two 

Mesmo se você reduzisse o tamanho de um Div para dar espaço ao outro div, porque eles são elementos de bloco, você ficaria com espaço ao lado de Div one e Div dois abaixo de Div one . Para mover o div até a próxima linha, ambos precisam ter a configuração de exibição de bloco em linha, conforme mostrado abaixo.

Uma div

Div dois

 Div one Div two 

Abaixo estão alguns exemplos diferentes de uma div de três colunas. Primeiro, o div de três colunas abaixo segue a mesma ideia dos exemplos acima, exceto que adiciona um div.

Uma div

Div dois

Três div

 Div one Div two Div três 

Claro, se você quer que os divs ocupem 100% do elemento que os contém, fica um pouco mais complicado. Abaixo está um exemplo de como você pode criar três div's próximos uns dos outros que ocupam 100% do elemento. No exemplo abaixo, em vez de manter todos os divs na mesma linha usando o bloco inline, estamos flutuando na div esquerda e direita.

Uma div

Três div

Div dois

 Div One DIV TRÊS Div Two 

Dica: Embora o exemplo acima de uma coluna de três div seja responsivo, a customização adicional, como ocultar Div três e ajustar as larguras, também pode ser adicionada ao estilo.