Making a responsive CSS square

[Shikkediel]

Came across this topic where the question was how to make a responsive square element with CSS. Most obvious would be to use viewport units (width and height in vw) but that can be too large when a scrollbar appears. Won’t work if there’s content that overflow vertically. Then I came across this ingenious solution :

http://www.mademyday.de/css-height-equals-width-with-pure-css.html

Making a couple of nice square divs :

https://jsfiddle.net/3z887swo/4/

.box {
    float: left;
    width: 50%;
}

.box:before {
    content: "";
    display: block;
    padding-top: 100%;
}

My question though – why does the pseudo element append it’s vertical padding in relationship to the width of the original element?

[Paulie_D]

why does the pseudo element append it’s vertical padding in relationship to the width of the original element?

Simple answer..because that’s what the CSS spec says…or in other words BECAUSE!!

[Shikkediel]

Hmm… I guess so. Not very satisfying but it is what it is then.

http://www.w3.org/TR/CSS2/box.html

[Paulie_D]

Came across this topic where the question was how to make a responsive square element with CSS.

It’s worth pointing out that this is for empty divs…as soon as you put content in them they’re no longer square.

[Shikkediel]

Cheers, thanks for the tip. I’ve included the link to that page in the reply which offers a trick for that as well. Slightly hackish (absolute positioning) but overruled by niftiness of approach, I reckon :

#inner {
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 255, 0.35)
}

https://jsfiddle.net/3z887swo/5/

[Author]

Posts