Monthly Archives: September 2017

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 […]