Pure CSS Solution - Square Elements?

css layout width aspect-ratio
Trey Keown picture Trey Keown · Dec 13, 2012 · Viewed 40.6k times · Source

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

Tomasz Kowalczyk picture Tomasz Kowalczyk · Oct 18, 2013

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

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

Hope that helps

Related questions

Width: 100% Without Scrollbars

I'm trying to make a part of my webpage that fit the width of the browser, for this I'm using width: 100%, the problem is that it shows scrollbars and I can't use overflow-x: hidden; because it will make some of …

Read More
How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags

Imagine a simple unsorted list with some <li> items. Now, I have defined the bullets to be square shaped via list-style:square; However, if I set the color of the <li> items with color: #F00; then …

Read More
CSS - Expand float child DIV height to parent's height

I have the page structure as: <div class="parent"> <div class="child-left floatLeft"> </div> <div class="child-right floatLeft"> </div> </div> Now, the child-left DIV will have more content, …

Read More