The margin on my buttons won't work, they just stack up together all in one on the top right - Html

JulianStillwell
April 12, 2023
266 views
3 votes
3 Answers

I was trying to put my buttons from top to bottom on my html page in the upper right hand corner. They just all stack up there, the only way that I am able to unstack them is is I do the br tag 3 times between each button. Shouldn’t the top and bottom margin deal with this?
If you run the code snippet you can see that all of the buttons stack together in the top right, I want them to be one on top of the other.

HTML and CSS code:

.button {
  font-family: Trebuchet MS;
  font-size: 20px;
  color: #000;
  border: none;
  text-align: center;
  background-color: transparent;
  padding: 7px;
  margin: 20px;
  border: 2px solid black;
  border-radius: 15px;
  padding: 8px;
  right: 10px;
  position: absolute;
}

<center>
  <a href="dinosaur.html"><button class="button">Dinosaur Game</button></a></button>
  <a href="slope.html"><button class="button">Slope</button></a>
  <a href="tunnel-rush.html"><button class="button">Tunnel Rush</button></a>
  <a href="2048.html"><button class="button">2048</button></a>
  <a href="ratatouille.html"><button class="button">Ratatouille</button></a>
</center>

Tags: css html

Answers

For the buttons all stacked up, it is because you have position: absolute; in the button styles.

For the buttons to align right, you can try wrapping the buttons in a flexbox like so:

.button {
  font-family: Trebuchet MS;
  font-size: 20px;
  color: #000;
  border: none;
  text-align: center;
  background-color: transparent;
  padding: 7px;
  margin: 20px;
  border: 2px solid black;
  border-radius: 15px;
  padding: 8px;
  right: 10px;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
 }

<div class="container">
  <a href="dinosaur.html"><button class="button">Dinosaur Game</button></a></button>
  <a href="slope.html"><button class="button">Slope</button></a>
  <a href="tunnel-rush.html"><button class="button">Tunnel Rush</button></a>
  <a href="2048.html"><button class="button">2048</button></a>
  <a href="ratatouille.html"><button class="button">Ratatouille</button></a>
</div>

I am not sure about center tag and also </button> at the end of first link. FLEX must deal with the issue

main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
}

.button {
  font-family: Trebuchet MS;
  font-size: 20px;
  color: #000;
  border: none;
  text-align: center;
  background-color: transparent;
  padding: 7px;
  margin: 20px;
  border: 2px solid black;
  border-radius: 15px;
  padding: 8px;
  right: 10px;
  /*position: absolute;*/
}

    <main>
      <a href="dinosaur.html"><button class="button">Dinosaur Game</button></a>
      <a href="slope.html"><button class="button">Slope</button></a>
      <a href="tunnel-rush.html"><button class="button">Tunnel Rush</button></a>
      <a href="2048.html"><button class="button">2048</button></a>
      <a href="ratatouille.html"><button class="button">Ratatouille</button></a>
    </main>

You can use position:relative and display:block attributes for .button class. I wrote it like below now works fine. I hope it works for you. Additionally if you want to align items to the right you can use which i wrote below .right class attributes in css codes.

.button {
  font-family: Trebuchet MS;
  font-size: 20px;
  color: #000;
  border: none;
  background-color: transparent;
  padding: 7px;
  margin: 20px;
  border: 2px solid black;
  border-radius: 15px;
  padding: 8px;
  position: relative;
  display:block;

}

.right {
display:flex;
align-items:flex-end;
flex-direction: column;
}

<div class="right">
  <a href="dinosaur.html"><button class="button">Dinosaur Game</button></a></button>
  <a href="slope.html"><button class="button">Slope</button></a>
  <a href="tunnel-rush.html"><button class="button">Tunnel Rush</button></a>
  <a href="2048.html"><button class="button">2048</button></a>
  <a href="ratatouille.html"><button class="button">Ratatouille</button></a>
</p>

Please signup or login to give your own answer.

Click here to cancel reply.

The margin on my buttons won't work, they just stack up together all in one on the top right – Html

Answers