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

  1. the entire width of the parent of #major being used calculate width of #semimajor

or

  1. the width of #majoris being calculated margins. box-sizing properties set border-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

Popular posts from this blog

python - No exponential form of the z-axis in matplotlib-3D-plots -

php - Best Light server (Linux + Web server + Database) for Raspberry Pi -

c# - "Newtonsoft.Json.JsonSerializationException unable to find constructor to use for types" error when deserializing class -