CSS: creating responsive element with a padding-bottom: % trick

<style>
#rubber {
   padding-bottom: 100%;
   width: 100%;
   position: relative;
}
#inner {
   position: absolute;
   height: 20px;
   width: 20px;
   top: 50%;
   left: 50%;
   margin: -10px 0 0 -10px;
}
</style>
<div id='rubber'><div id='inner'></div></div>

CSS: padding-bottom in percents is calculated based on width of the parent. Thus we get container(div#rubber), which height will depend on width of its parent. Its width will also depend on width of parent so we got fully responsive element in such a easy way.

Downside of this trick is that size of div#rubber does not depend on its contents, so we have to consider it.