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

Proportional scaling -- need help understanding how this css code works

Proportional scaling -- need help understanding how this css code works

Problem

I created this fiddle (http://jsfiddle.net/HfpHf/1/) based on the following stackoverflow question/answer: https://stackoverflow.com/a/9236397

The relevant bits are:

.box-parent {
width:95%;
padding-bottom:95%;
height:0;
position:relative;

}

.box {
border-radius: 10%;
width:100%; 
height:100%;
position:absolute;
left:0;
background-color:rgb(17, 17, 17);
color: #ffffff;
text-align: center;

}

The trouble is I don't really understand how or why it works. More specifically, what does setting height: 0 on the parent do and why does setting padding-bottom to the same percentage as Width result in the child being a square?

Problem courtesy of: Rush

Solution

The problem is that the li element doesn't have got specified height. So child elements have to be determinated only by its width.

We can't use height: 100% to specify parent-box because we don't know the height of li. The only solution is use padding which is destined only by parent element's width as you can see here in percentage specifition. There is written Specifies the padding in percent of the width of the containing element.

Solution courtesy of: Tomas Nekvinda

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

Proportional scaling -- need help understanding how this css code works

×

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

Get updates delivered right to your inbox!

Thank you for your subscription

×