CSS

CSS: Alinhamento de DIVS

Mais uma dica rápida. Neste post você vai aprender a alinhar divs.

A jogada para conseguir este alinhamento, está na configuração do CSS. Você cria um div que vai englobar todos os outros, configura o CSS utilizando o manipulador display e para os divs internos utilize o manipulador float.

Veja o código:

<head>
<style type="text/css">
 #externo {
    display: table;
 }
 .interno {
   float: left;
 }
</style>
</head>
 
<body>
    <div id="externo">
 
      <div class="interno">
        <p>Primeiro div</p>
      </div>
 
      <div class="interno">
        <p>Segundo div</p>
      </div>
 
    </div>
</body>

11 thoughts on “CSS: Alinhamento de DIVS

  • deivison05

    PODERIA SER MAIS APROFUNDADO O TEMA…

    Resposta
  • Ana Maria

    Só com isso consigo alinhar toda a página? Até parece 😛 …

    Resposta
    • Olá Ana,

      este post mostra uma forma de alinhar divs. Sabemos que existem outras formas.

      Obrigado pelo comentário.

      Tiago

      Resposta
  • Nossa, eu precisava dividir o site em 2 colunas para por outras divs, ficou perfeito!!!

    Parabéns, obrigado e continuem com o bom trabalho!

    Resposta
  • Ana Maria

    Caso queira alinhar toda a página poderia criar uma div pai com o margin: auto, e dentro dela as outras divs (filhas) que viessem ficar lado a lado com o float.

    Resposta
  • julio cesar

    Muito bom me ajudou muito…

    Resposta
  • Cara legal mas acho que tinha que aprofundar mais e mostrar mais formas de alinhamento, mas valeu consegui entender mais ou menos, abraço.

    Resposta
  • Roberto

    Tiago,

    O “display: table;” no externo e o “float:left;” no interno me salvaram ficou tudo ótimo aqui.

    Muito obrigado,

    Roberto

    Resposta
  • Marcos Gabriel

    Me ajudou. Obrigado!

    Resposta
  • Wener Morais

    Show! Bem prático e funcional!

    Resposta

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *