CSS HTML

Como posicionar uma div do lado de outra (CSS)

10 de fevereiro de 2020

Como posicionar uma div do lado de outra (CSS)

Neste artigo veremos como posicionar uma div do lado de outra, somente com CSS de uma forma simples e rápida, como é feito nos projetos profissionais.

posicionando uma div do lado de outra capa

Conteúdo também disponível em vídeo:

 

Fala programador, beleza? Bora aprender mais!

A solução para este problema é bem simples, precisamos apenas mudar a regra de display do CSS

Pois quando uma div é criada, ela vem com a regra setada para block

E isso faz exatamente o que o nome diz, transforma uma div em um bloco e nós precisamos mudar o display para inline-block

Assim conseguiremos atingir o nosso objetivo de como posicionar uma div do lado de outra 😀

Posicionando uma div do lado de outra: prática

Então vamos lá, primeiro nossa estrutura de HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Como posicionar uma div do lado de outra</title>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>

E agora o CSS que vamos iniciar neste projeto:

div {
    width: 100px;
    height: 100px;
}

#div1 {
    background-color: magenta;	
}

#div2 {
    background-color: teal;
}

E o resultado no navegador será este:

Como posicionar uma div do lado de outra ex1

Bom este é o problema, as divs estão posicionadas de forma vertical e nós queremos que ela fique posicionada de forma horizontal

Para solucionar isso, apenas precisamos fazer a adição da propriedade display com o valor inline-block na regra da div

Veja como fica:

div {
    width: 100px;
    height: 100px;
    display: inline-block;
}

E este será o resultado final, com o problema resolvido:

Como posicionar uma div do lado de outra ex2

Veja que a solução é bem simples, só é necessário conhecimento da propriedade display

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

E assim também podemos fazer ao contrário

Por exemplo: deixar um span em cima de outro, como a tag span vem com o display inline, apenas precisamos mudar para display block, fácil né? 🙂

Conclusão

Neste artigo vimos que deixar uma div do lado da outra é uma técnica muito simples, que só exige um pequeno conhecimento em CSS

Só precisamos alterar o display da div para inline-block, já que o padrão dela é block

E por hoje é isso, até o próximo post! 🙂

Confira também nosso curso de HTML e CSS gratuito no YouTube clicando aqui! Onde criamos um site do 0 até o resposivo 😀

Subscribe
Notify of
guest
10 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Alberto Barcelos

Olá! Gostei do post, só queria saber como colocar textos dentro das divs… Obrigado

Battisti

Olá Alberto, podes fazer assim:

<div>
<p>Texto</p>
</div>

Geraldo Junior

Muito bom! porém estou tentando colocar as divs encostadas sem margin, mas nao estou conseguindo, sempre tem um espaço entre elas… alguem pode me ajudar?

Battisti

Opa Geraldo, ou você utiliza o display flex, ou corrige a diferença com uma margin negativa, abraço!

Daniela

Gente vc me salvoooooo!!!!! :):)Ameiiiii!!!

Battisti

oi Daniela, que bom! Aproveita para dar uma passada no nosso canal de YouTube, tem vários cursos lá: https://www.youtube.com/channel/UCDoFiMhpOnLFq1uG4RL4xag

Adriano

Opa, corrigindo… deu certo. Tmj

Last edited 1 ano atrás by Adriano
Battisti

Boa!

Victor

apos fazer isso, como faço para centralizar?

lucas pinheiro ribeiro

Galera… de forma didatica: <html> <meta charset=”utf-8″> <head> <title>JavaScript testAlert;</title>  <script src=”main.js”></script> <style type=”text/css”> #container {  display: inline-flex;  background-color: #444;  margin: 0 20%;  border: 1px solid #555;  width: 60%;  height: 80%; } .grid {  background-color: #555;  padding: 10px;  margin: 10px;  border: 1px solid #666;  width: 20%;  height: 90%; } .grid2 {  background-color: #555;  padding: 10px;  margin: 10px;  border: 1px solid #666;  width: 20%;  height: 90%; } .grid3 {  background-color: #555;  padding: 10px;  margin: 10px;  border: 1px solid #666;  width: 20%;  height: 90%; } .grid4 {  background-color: #555;  padding: 10px;  margin: 10px;  border: 1px solid #666;  width: 20%;  height: 90%; }… Read more »

10
0
Would love your thoughts, please comment.x