Pure CSS Solution - Square Elements?

Question

If I have a <div> with a relative width (such as width: 50%), is there a simple way to make it have the same width as it does height without resorting to JavaScript?

Answer 1

It is actually possible to achieve it with this neat trick i found at this blog

#square {
   width: 100%;
   height: 0;
   padding-bottom: 100%;
}