Question 308000 in Html Question posted in
Some basic documentation can be found here.

Html – Can't align my div to the right after in a fixed height and width

I’m having trouble trying to make an image with an anchor, like a next and previous button with a round colored background, using only CSS. I want to put one image on the left, and the other on the right of the page.

The image on the left work itself just fine, but the image I want to put on the right, is displayed in a new block and also to the left of the page.

The code is something like this

  main div.voltar {
  text-align: left;
  height: 52px;
  width: 52px;
  background-color: #D9C2A7;
  border-radius: 50%;
  padding: 3px;
  box-shadow: 2px 6px 8px rgba(0, 0, 0, 0.288);
}

main div.proximo {
  height: 52px;
  width: 52px;
  text-align: right;
  background-color: #D9C2A7;
  border-radius: 50%;
  padding: 3px;
  box-shadow: 2px 6px 8px rgba(0, 0, 0, 0.288);
<main>
  <div class="voltar">
    <abbr title="Página dos desafios"><a href="../index.html" target="self" rel="prev"><img src="../imagens/volta.png"></a></abbr>
  </div>
  <div class="proximo">
    <abbr title="Módulo 2"><a href="../modulo-2/modulo2.html" target="_self" rel="next" class="proximo"><img src="../imagens/frente.png"></a></abbr>
  </div>
</main>

Where is the mistake?

Tags:

2

Answers


  1. 0

    Because <div> elements are block elements and extend to 100% width by default. You can change that, but taking a step back there’s a much simpler approach.

    Don’t manually position what Flexbox can position for you. Just set the container to display: flex; and justify its content with space-between:

    main {
  display: flex;
  justify-content: space-between;
}

main div.voltar {
  height: 52px;
  width: 52px;
  background-color: #D9C2A7;
  border-radius: 50%; 
  padding: 3px;
  box-shadow: 2px 6px 8px rgba(0, 0, 0, 0.288);
}
   
main div.proximo {
  height: 52px;
  width: 52px;  
  background-color: #D9C2A7; 
  border-radius: 50%; 
  padding: 3px;    
  box-shadow: 2px 6px 8px rgba(0, 0, 0, 0.288); 
}
    <main>
  <div class="voltar">
    <abbr title="Página dos desafios"><a href="../index.html" target="self" rel="prev"><img src="../imagens/volta.png"></a></abbr>
  </div>
  <div class="proximo">
    <abbr title="Módulo 2"><a href="../modulo-2/modulo2.html" target="_self" rel="next" class="proximo"><img src="../imagens/frente.png"></a></abbr>
  </div>
</main>

    Edit: If you don’t want to change the display for <main> then just wrap the target elements in a container that can be used for Flexbox:

    main div.wrapper {
  display: flex;
  justify-content: space-between;
}

main div.voltar {
  height: 52px;
  width: 52px;
  background-color: #D9C2A7;
  border-radius: 50%; 
  padding: 3px;
  box-shadow: 2px 6px 8px rgba(0, 0, 0, 0.288);
}
   
main div.proximo {
  height: 52px;
  width: 52px;  
  background-color: #D9C2A7; 
  border-radius: 50%; 
  padding: 3px;    
  box-shadow: 2px 6px 8px rgba(0, 0, 0, 0.288); 
}
    <main>
  <div class="wrapper">
    <div class="voltar">
      <abbr title="Página dos desafios"><a href="../index.html" target="self" rel="prev"><img src="../imagens/volta.png"></a></abbr>
    </div>
    <div class="proximo">
      <abbr title="Módulo 2"><a href="../modulo-2/modulo2.html" target="_self" rel="next" class="proximo"><img src="../imagens/frente.png"></a></abbr>
    </div>
  </div>
</main>
    Login or Signup to reply.
  2. 0

    It’s simple. Use the flex property.

    main {
  display: flex;
  align-items:center;
}

main div.voltar {
    height: 52px;
    width: 52px;
    background-color: #D9C2A7;
    border-radius: 50%; 
    padding: 3px;
    box-shadow: 2px 6px 8px rgba(0, 0, 0, 0.288);
}
   

main div.proximo {
    height: 52px;
    width: 52px;  
    background-color: #D9C2A7; 
    border-radius: 50%; 
    padding: 3px;    
    box-shadow: 2px 6px 8px rgba(0, 0, 0, 0.288); 
}
    <main>
  <div class="voltar">
    <abbr title="Página dos desafios"><a href="../index.html" target="self" rel="prev"><img src="../imagens/volta.png"></a></abbr>
  </div>
  <div class="proximo">
    <abbr title="Módulo 2"><a href="../modulo-2/modulo2.html" target="_self" rel="next" class="proximo"><img src="../imagens/frente.png"></a></abbr>
  </div>
</main>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search