Search code examples
htmlcsscollision

Avoiding buttons from colliding when rescaled

What I'd like to do is avoid these two buttons from bumping into each other when the web-browser's page is rescaled to a smaller size.

I tried to use margin, but as both buttons are in absolute position, it doesn't effect at all.

enter image description here

Here's the HTML and CSS for this

#appButtons{
	height:40px;
	width:125px;
	background-color:#000080;
	border:solid 1px #000080;
	color:white;
	border-radius:4px;
	text-align:center;
	margin-bottom:0px;
}

#appButtons:hover{
	background-color:#E9E9E9;
	color:#000080;
}
<table>
  <tr style="display:none">
    <button id="appButtons" name="see_words" style="position:absolute;left:25%;top:10%;display: inline-block;">Check words in your dictionary</button><br>
  </tr>
  <tr>
    <button id="appButtons" name="add_words" style="position:absolute;right:25%;top:10%;display:inline-block;">Add words to your dictionary</button><br>
  </tr>
</table>

Solution

  • You should not be using inline styling on elements, so I removed those. I also rewrote your example to use flexbox. I hope this helps!

    HTML:

    <div class="container">
  <button id="appButtons" name="see_words">Check words in your dictionary</button>
  <button id="appButtons" name="add_words">Add words to your dictionary</button>
</div>

    CSS:

    .container {
  display: flex;
  justify-content: center;
}

.container button {
  margin: 50px;
  /* add whatever margin you want here */
}