0

Please see this codepen: http://codepen.io/aaron/pen/Anqri

If the .item-container's height is changed to any other positive percentage, nothing happens. However, changing the height to a negative percentage, a pixel value, or removing it causes the images to grow and no longer be 25%.

I cannot understand why the percentage height is necessary and yet the number does not matter.

Aaron
  • 13,349
  • 11
  • 66
  • 105

1 Answers1

1

That's because no parent of .item-container has an explicit height. Percentage values in CSS depend on explicit values set on parents.

omma2289
  • 54,161
  • 8
  • 64
  • 68
  • I put both `height: 100%;` and `height: 10%;` on `.collection-container` and there was no difference. – Aaron Jul 19 '13 at 13:47
  • Same reason, you would either have to go all the way back to body and html using percentage values on all parent elements or set an explicit value in pixels or another unit in one of them and then use percentages. Check out [this answer](http://stackoverflow.com/a/5658062/2049063) – omma2289 Jul 19 '13 at 17:04