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 div with 100% width and padding-top set to 100% to maintain a square aspect ratio.
- Set position to relative and use absolutely positioned or flexbox-aligned child elements to add and center content inside.
Yes, you can create a responsive square div in Webflow where the width is 100% of the parent, and the height automatically matches the width using a CSS technique.
1. Use Padding for Aspect Ratio
- Webflow does not allow a div's height to respond dynamically to its width directly.
- However, using padding-top: 100% (or padding-bottom) on the div creates a square. This works because padding in percentages is based on the width of the element.
2. Steps to Create It in Webflow
- Add a Div Block inside your parent container.
- Give it a class name (e.g.,
SquareDiv). - Set Width: 100%.
- Set Padding-Top: 100% (leave height set to “Auto”).
- Set Position: Relative (so you can place children inside properly).
3. Optional: Add Content Inside the Square
- Any content inside the square should be absolutely positioned (Position: Absolute) and use top: 0, left: 0, width: 100%, height: 100% to fill the square.
- Alternatively, use Flexbox with
Position: Absoluteon the child wrapper to center content inside.
Summary
To create a responsive square div in Webflow: set the width to 100% and the padding-top to 100%. This effectively creates a square as the height mirrors the width based on the CSS box model.