Como Deixar Div lado a lado

Ao criar uma página web, é comum a necessidade de organizar o conteúdo em diferentes seções ou elementos. Um dos elementos mais utilizados para isso é a tag <div> do HTML, que permite criar uma caixa retangular que pode ser estilizada com CSS para adicionar cor, bordas, margens, entre outros. Quando se deseja que duas ou mais caixas <div> fiquem lado a lado, é necessário utilizar algumas técnicas para que elas não se sobreponham. Neste artigo, vamos explicar algumas maneiras de deixar um <div> lado a lado.

Usando o display inline-block

1. A propriedade display define o tipo de caixa que um elemento HTML representa. Por padrão, as caixas <div> possuem a propriedade display definida como block, o que faz com que cada uma ocupe uma linha inteira. Para deixar duas caixas lado a lado, é possível mudar a propriedade display para inline-block, que permite que as caixas sejam exibidas em linha, uma ao lado da outra. Por exemplo:

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
</div>

<style>
.box {
  display: inline-block;
  width: 50%;
  height: 200px;
  background-color: gray;
  border: 1px solid black;
}
</style>

O código acima cria duas caixas <div> com a classe “box” dentro de uma caixa <div> com a classe “container”. As caixas possuem a propriedade display definida como inline-block e a largura definida como 50% para que elas ocupem metade da largura da tela cada. O resultado será duas caixas cinzas uma ao lado da outra, com uma borda preta.

2. Usando o Float

Outra maneira de deixar duas caixas <div> lado a lado é utilizando a propriedade float do CSS. Essa propriedade faz com que as caixas flutuem para a esquerda ou para a direita, deixando espaço para a caixa seguinte. Por exemplo:

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
</div>

<style>
.box {
  float: left;
  width: 50%;
  height: 200px;
  background-color: gray;
  border: 1px solid black;
}
</style>

O código acima cria duas caixas <div> com a classe “box” dentro de uma caixa <div> com a classe “container”. As caixas possuem a propriedade float definida como left e a largura definida como 50%. O resultado será duas caixas cinzas uma ao lado da outra, com uma borda preta.

3.Usando a propriedade “display: flex”

Uma terceira maneira de posicionar DIVs lado a lado é usando a propriedade “display: flex”. Essa técnica é mais recente, mas é amplamente suportada pelos navegadores modernos. Aqui está um exemplo:

HTML:

<div class="container">
    <div class="div1">DIV 1</div>
    <div class="div2">DIV 2</div>
</div>

css:

.container {
    display: flex;
}
.div1, .div2 {
    flex: 1;
}

Em Conclusão

Posicionar DIVs lado a lado é uma técnica muito útil para design de páginas web e há várias maneiras de fazer isso usando CSS. As três técnicas que abordamos neste artigo são as mais comuns, mas há outras maneiras de fazer isso também. Experimente essas técnicas e escolha a que melhor atende às suas necessidades de design.