Pure CSS Solution - Square Elements?

Question

If I have a `

` 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?

Accepted Answer

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

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

Solution