How to style a div to be a responsive square?

The Solution to How to style a div to be a responsive square? is


Works on almost all browsers.

You can try giving padding-bottom as a percentage.

<div style="height:0;width:20%;padding-bottom:20%;background-color:red">
<div>
Content goes here
</div>
</div>

The outer div is making a square and inner div contains the content. This solution worked for me many times.

Here's a jsfiddle

~ Answered on 2013-09-28 15:28:49


Most Viewed Questions: