Como colocar duas Divs lado a lado

Escrito por robert godard | Traduzido por fernanda lemi
Como colocar duas Divs lado a lado
Coloque duas caixas de conteúdo próximas uma da outra, utilizando a propriedade "float" (Comstock/Comstock/Getty Images)

Uma tag div é utilizada em um código HTML para designar um conjunto de classes CSS para uma porção do site. Isso é feito ligando o documento HTML a uma folha de estilo CSS, que contém informações sobre os atributos dos diversos blocos de conteúdo. Essas classes são, então, chamadas utilizando uma tag div no documento HTML. Para colocar duas tags div horizontalmente próximas uma da outra, será necessário utilizar a propriedade "float".

Instruções

  1. 1

    Abra um editor de textos, como o Bloco de notas, para criar uma folha de estilo CSS. Caso já possua uma, abra-a.

  2. 2

    Defina as propriedades das duas tags div. Será necessário utilizar o comando "float" para colocar uma à esquerda e outra à direita. Crie uma classe chamada "#esquerda" e insira o seguinte código dentro dela:

    esquerda {

    width: 50%; float: left; }

    Isso informará ao documento HTML que a largura da caixa deverá ser de 50% e ela deverá estar posicionada à esquerda. É possível alterar a largura e defini-la em pixels ou porcentagem.

  3. 3

    Crie uma classe chamada "#direita" e insira o seguinte código dentro dela:

    direita {

    width: 50%; float: right; }

    Isso informará a mesma coisa sobre essa classe CSS, mas a posicionará à direita. Salve o documento como "estilo.css" e feche-o.

  4. 4

    Abra o documento HTML no qual deseja inserir as tags div. Certifique-se de que ele esteja no mesmo diretório da folha de estilo. No topo do documento, ligue-o à folha de estilo:

  5. 5

    Role a tela e insira a tag para definir o início da página web, se ainda não possuir uma. Encontre o local onde deseja inserir as tags fiv e insira o código

    Conteúdo da caixa da esquerda
    Conteúdo da caixa da direita
    . É possível inserir qualquer conteúdo nessas divs. Elas serão colocadas lado a lado no site.

Dicas & Advertências

  • É possível utilizar classes CSS para definir vários tipos de atributos, incluindo a cor de fundo e das bordas.
  • Não utilize a propriedade "float" em duas tags na mesma direção, pois poderá causar problemas entre navegadores.