"'padding: 50% 0;' will force it to be a square"

what? why?

<style>.sqtest
{
  background:#f00;
  padding: 50% 0;
}
</style>
<div class=sqtest>&nbsp;</div>

some text to make this wider some text to make this wider some text to make this wider some text to make this wider some text to make this wider some text to make this wider some text to make this wider some text to make this wider some text to make this wider some text to make this wider some text to make this wider some text to make this wider some text to make this wider some text to make this wider some text to make this wider some text to make this wider some text to make this wider some text to make this wider some text to make this wider some text to make this wider some text to make this wider some text to make this wider some text to make this wider some text to make this wider some text to make this wider