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
- Set the div’s width to 100% and padding-bottom to 100% to maintain a 1:1 aspect ratio.
- Remove any set height, and optionally use position: relative for the container and position: absolute for inner content to align elements inside.
Yes, you can create a square div in Webflow that is 100% width of its parent and has a height equal to that width by using padding-bottom to maintain a 1:1 aspect ratio.
1. Set the Square Container Width
- Select the div block you want to make square.
- Set its width to 100% so it fills the width of its parent container.
2. Use Padding to Match Height to Width
- Set the padding-bottom to 100%. This creates a square because padding-bottom in percentages is based on the element’s width.
- Remove any height value. The height should be auto so the padding controls the size.
3. Make It Position-Relative (Optional)
- For easier positioning of child elements inside the square, you may want to set the position to Relative.
4. Add Inner Content (Optional)
- To place content inside the square:
- Add another div inside and set its position to Absolute, full width & height (100%, 100%) so it sits correctly in the square.
- Then you can center or align content as needed.
Summary
To create a perfectly square div that fills 100% of its parent’s width and matches height to width, set the div to 100% width with 100% padding-bottom and no height. This leverages the aspect-ratio trick to keep it square across all screen sizes.