The Design

A couple years back I was working a site that had a layout that stuck in my mind far after completing it. It had two rows. Both rows had two columns with about a 3/5 width and a 2/5 width. The first row had the big column on the left and then the second row had the big column on the right.

The design also featured a centered square that dynamically aligned with the inner edges of the columns, maintaining its proportions as the screen size changed. At the time I just played with the percentages until everything lined up. I wanted to revisit this design to see if I could make it interactive.

Click and drag the resize handle to see how the columns and box adjust.

Responsive Squares

Before encountering this design, I had known that if you give a block element a padding-bottom of 100% it would render as a square as long as it had a 100% width. What I didn't know was that you could give it a width of 50% and a padding-bottom of 50% and it would still render as a square. So knowing this, I can resize the square along with the columns and still keep the proportions of a square.

Looking into it a little further I learned when you set padding-bottom: 100% on a div, the height of the padding becomes 100% of the width of the div. Since padding adds space inside the div without directly affecting its width, this effectively creates a box where the height equals the width.

Please humor me while I display this below real quick.

Aspect Ratio

All this padding-bottom talk isn't really necessary anymore with the advent of aspect-ratio. This is a much cleaner and straightforward approach.

Square Positioning

In order to keep the square centered while having its width change I am absolutely positioning the square. I noticed that at certain widths the border of the square is not perfectly aligned with the column on the right. It isn't off by much, but the line looks thicker than the line on the left. If I adjust it to look good at one resolution it glitches at other resolutions.

I tried a completely different layout where I use flex to position the square and used aspect-ratio to maintain the square shape but it had the same issue. This is an issue I will not go down the rabbit hole to fix as there are no project requirements.

If this was a real project, I would suggest having larger borders to hide the inconsistency as long as that aligned with design's goals.

The Idea

I had the idea to make a slider that controls the width of all the elements inside. If you change the width of the big column, the rest of the widths and proportions would update.

I admit this math isn't very complicated. But it's still fun.

The Math

Big Column Width

Small Column Width

Box Width

After calculating the proportions, I implemented a slider that updates the values in real-time as you adjust it, allowing for an interactive demonstration of the layout.

The inner box can get too tall for the container so once the box height is taller than the container I change the amount of padding-bottom it gets. This changes it from a square to a rectangle.

The Result