twitter bootstrap - css width % working incorrectly; longer than necessary -
i have set of images want stacked 1 on other. working bootstrap, , kept parent div @ center of jumbotron. div encloses image, , absolutely divs further contain images. however, when apply width:100%
child divs, end being longer/
this js-fiddle code snippet: https://jsfiddle.net/yhl6tndn/
i led believe % measured respect parent container (#major
in example). width , height of #semimajor
should equal, since width , height of #major
equal.
on checking actual sizes, find either
- the entire width of the parent of
#major
being used calculate width of#semimajor
or
- the width of
#major
is being calculated margins.box-sizing
properties setborder-box
.
what should happen #semimajor
should measure 150px 150px. cannot spot error in code though.
edit 1: position: relative
on #major
removes issue, still not understand why must case.
when used position: absolute
, comes out of normal flow of document , positioned respect body
, comes out of #major
.
notice when have added position: relative
, positioned absolutely nearest relatively positioned parent container i.e. #major
, child divs don't go past #major
.
Comments
Post a Comment