Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Responsive Design: Why does height zero & padding-bottom work for making a div responsively sized?

Responsive Design: Why does height zero & padding-bottom work for making a div responsively sized?

Problem

After looking through Zurb Foundation's code, I noticed they were using a CSS approach like this to allow a responsive square div:

.div{
    position:relative;
    width:33%;
    height:0;
    padding-bottom:33%;
}
.divInner{
    position:absolute;
    width:100%;
    height:100%;
}

I've been using this approach on some newer projects (still in private dev), but don't know the browser support for it or why the Height is even able to mimic the width size. Does anyone know why this happens? Thanks!

Problem courtesy of: Nish

Solution

The second element is positioned absolutely relative to is container. Which is positioned relative.

In CSS, percentage based padding is relative to the width of the element. That is what creates the square effect.

And is also why if you add the same size padding to all sides, all sides have the same percentage of padding. It is relative to one measurement (width) and NOT both width and height. that would cause the padding to be skewed if the the element was not square.

Solution courtesy of: laymanje

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Responsive Design: Why does height zero & padding-bottom work for making a div responsively sized?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×