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>

10 comentários em “CSS: Alinhamento de DIVS

  • 10 de setembro de 2011 em 22:39
    Permalink

    PODERIA SER MAIS APROFUNDADO O TEMA…

    Resposta
  • 10 de outubro de 2011 em 19:02
    Permalink

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

    Resposta
    • 10 de outubro de 2011 em 19:43
      Permalink

      Olá Ana,

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

      Obrigado pelo comentário.

      Tiago

      Resposta
  • 2 de abril de 2012 em 1:58
    Permalink

    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
  • 16 de outubro de 2012 em 17:56
    Permalink

    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
  • 20 de dezembro de 2012 em 19:07
    Permalink

    Muito bom me ajudou muito…

    Resposta
  • 8 de abril de 2013 em 22:19
    Permalink

    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
  • 31 de outubro de 2017 em 1:25
    Permalink

    Tiago,

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

    Muito obrigado,

    Roberto

    Resposta

Deixe uma resposta

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