Q: css width % working incorrectly; longer than necessary I have a set of images that I want stacked one over the other. I am working with bootstrap, and I kept a parent div at the center of a jumbotron. This div encloses an image, and absolutely divs which further contain images. However, when I apply width:100% to the child divs, they end up being longer/
This js-fiddle is the code snippet: https://jsfiddle.net/yhL6tndn/
I am led to believe that % is actually measured with respect to parent container (#major in the example). So the width and height of my #semimajor should be equal, since width and height of #major are equal.
On checking actual sizes, I find that either


*

*the entire width of the the parent of #major is being used to calculate  width of #semimajor
or


*the width of #majoris being calculated with margins. My box-sizing properties are set to border-box.


What should happen is that the #semimajor should measure 150px by 150px. I cannot spot error in the code though.
Edit 1: position: relative on #major removes the issue, but I still do not understand why this must be the case.

A: When you used position: absolute, it comes out of the normal flow of the document and is positioned with respect to body and comes out of #major.
Notice when you have added position: relative, it is positioned absolutely to the nearest relatively positioned parent container i.e. #major, so the child divs don't go past the #major.
