Can I create a square div within a parent div in Webflow, where the square's width is 100% of the parent div and the height matches the width?
TL;DR
- Create a parent div and add a child div inside it.
- Set the parent div's width and apply desired styles.
- Make the child div's width 100% and use padding-top of 100% to maintain a square aspect ratio.
Creating a square div that maintains a 1:1 aspect ratio within a parent div in Webflow is definitely possible. Here's how you can achieve this effect.
1. Set Up Your Parent and Child Divs
- Create a parent div element where you want the square to reside.
- Add a child div inside the parent div that you want to be a square.
2. Style the Parent Div
- Select the parent div.
- Set the width to your desired percentage (e.g., 100% to make the square span the complete width of the parent).
- Apply any relevant styles you need, like height or other layout elements.
3. Style the Child Div as a Square
- Select the child div.
- Set the width to 100% of the parent.
- For the height, use the padding-top property as a percentage to make it equal to the width. Set padding-top equal to 100%. This ensures the height will be maintained in proportion to the width, thus creating a perfect square.
- Additional styling, like background color or borders, can be applied as needed.
Summary
To create a square div within a parent div in Webflow, set the child div’s width to 100% and use a padding-top of 100% to maintain a 1:1 aspect ratio with the parent. This allows the height of the square to match its width, giving you a perfect square.