Como colocar DIV ou botões lado a lado utilizando CSS

em





Olá pessoal estou aqui novamente para explicar uma dúvida que muitos iniciantes tem ao utilizar DIVs, que nada mais é que colocar duas ou mais divs uma ao lado da outra. Para resolvermos isto é bem simples. Primeiro criaremos uma div principal para envolver as demais divs que ficaram lado a lado, e as divs que ficaram lado a lado basta ter a propriedade float:left e deixar o position: relative como no exemplo abaixo, veja:


< html>
< head>






 


DIV 1



DIV 2



DIV 3
DIV 1
DIV 2
DIV 3



Ah estava me esquecendo para finalizar colocamos uma div com um clear:both no final.

Aqui no exemplo enfeitei um pouco mais é isto aí

Em um dos comentários abaixo me foi questionado como colocar 5 botões em uma linha e 5 em outra. Veja o exemplo: 
< html>


Espero ter ajudado, qualquer dúvida favor comentar que eu responderei. Abraço!!!!

Compartilhe nosso blog.

Comentários

  1. guara.junior7 de junho de 2013 às 11:16

    Muito bom velho, ajudou pracaralho ;D

    ResponderExcluir
  2. guara.junior7 de junho de 2013 às 11:17

    uma dúvida, pra que serve o Clear: both??

    ResponderExcluir
  3. Aquiles Maior7 de junho de 2013 às 11:32

    Guara Junior, eu que agradeço por visitar meu blog. Respondendo sua pergunta resumidamente sobre o Clear: Both
    A propriedade clear limpa os elementos que estão ao seu lado.
    clear: left » limpa os elementos da esquerda
    clear: right » limpa os elementos da direita
    clear: both » limpa os dois lados
    Tipo se vc tiver um div pai aí precisa limpar pra começar com outra div. É mais ou menos isso. Qualquer coisa me add lá no face. Abraço!!!!
    @aquilesmaior

    ResponderExcluir

Postar um comentário