Q:

How to make something a square using only percentage measurements

I'm writing a game of pong in JavaScript, and I need the ball to be a square for obvious reasons. I'm using percentage measurements so the game works on all resolutions, but I was wondering how to make the ball a square using these.
#ball{
  position: absolute;
  height: 1.5%;
  width: 1.5%;
  background-color: white;
  top: 50%;
  left: 50%;
  margin-top: -12.5px;
  margin-left: -12.5px;
}

Obviously 1.5% of the width is a lot more than 1.5% of the height. Does anyone know how to make these two the same in pixels, without sacrificing flexibility?

A:

instead of height, you can use percentage padding-bottom (or padding-top):

#ball {
  position: absolute;
  width: 3.5%;
  background-color: red;
  top: 50%;
  left: 50%;
  margin-top: -12.5px;
  margin-left: -12.5px;
  padding-bottom: 3.5%;
}
<div id="ball"></div>

