Make a <div> square when there is a dynamically changing width based on percentage

Question

I am working on a web app that will generate an NxN grid based on the user's selection of N. I want the total width of the grid to be relative (ie 100% of the available space) so that users can print on various paper sizes. I can easily calculate the width of the squares in the grid by % (ie: 100%/N), but I am having issues calculating the height. The height of a web page is always going to be infinite unless I artificially limit it which, like I said, I don't want to do. How can I make the squares in my grid be square versus rectangular when the height and width constraints of my grid are dynamic and not square?

Thanks in advance!

Answer 1

Set the height = width? That's the definition of a square. You may need to use actual pixel size for width instead of % though, which of course adds browser quirks, but hey, it's CSS!

Answer 2

This is un-tested, I do not know of how to do this in CSS only, I would use jQuery.

$('div').height($('div').width());