Como colocar duas Divs lado a lado

Escrito por robert godard | Traduzido por fernanda lemi
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
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".

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

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:

    <head> <link rel="stylesheet" type="text/css" href="estilo.css" /> </head>

  5. 5

    Role a tela e insira a tag <body> 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 <div id="esquerda"> Conteúdo da caixa da esquerda </div> <div id="direita"> Conteúdo da caixa da direita </div>. É 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.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível