Fluid width squares in CSS

It’s easy to make a perfect square in CSS – set an equal height and width and boom, you’re done. But what if you don’t always know the width of the square? For instance you’ve given the structures percentage widths to fit a fluid container.

No hacks, no javascript?

Bottom padding = width

It’s as simple as that:

.square {
    height: 0;
    padding-bottom: 25%;
    width: 25%;
}

The height declaration is added to prevent content inside the square messing up the proportions.

Below are nested boxes each with the above css and you can see that it produces perfect squares – adjust the browser width to see it in action.

Credit

Credit for this goes to Marco – Full CSS Fluid Squares (or Rectangles, or what-you-want-but-fluid).

5 comments on “Fluid width squares in CSS”

Add your comment

Your email address will not be published. Required fields are marked *