0

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?

Community
  • 1
  • 1
Rush
  • 443
  • 5
  • 6
  • That's some weird `CSS` does it do anything special for you or do you just wan't some square boxes? – iConnor Jul 13 '13 at 17:26
  • heh. I want square boxes that shrink and enlarge auto-magically based on the screen size. Only way I could find to do it. – Rush Jul 13 '13 at 17:29

1 Answers1

1

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.

Tomas Nekvinda
  • 524
  • 1
  • 5
  • 15
  • I realize we don't know the height of the li. I'm just wondering what setting the box-parent to 0 accomplishes and also why/how setting the parent padding to the parent width result in a box? – Rush Jul 13 '13 at 17:22
  • Here is setting height to 0 unnecessary. It is necessary if you want the parent-box to contain for exmaple same text. The padding result in box, because padding is calculated from parent width, so width: 95% is the same as padding-bottom: 95%. It is the same size. – Tomas Nekvinda Jul 13 '13 at 17:25
  • Ah, thanks. Why would it be necessary if I had text in there? – Rush Jul 13 '13 at 21:02
  • It could be necessary if you add some text to parent-box after the div box. Otherwise it can break the box. As you can see [here](http://jsfiddle.net/HfpHf/2/). – Tomas Nekvinda Jul 13 '13 at 21:33