html - Unexpected CSS Behavior? -

while playing around divider lines take full height of container without parents height, stumbled across below scenario. can 1 figure out why setting dividers position:absolute , display:inline-block not cause them float way left of parent container expected? why inline?

html

<div class="wrapper">   <div class="box"></div>   <div class="divider"></div>   <div class="box"></div>   <div class="divider"></div>   <div class="box"></div> </div> 

css

.wrapper{   width:100%;   text-align:center;   position: relative; }  .box{   display: inline-block;   width: 150px;   height: 100px;   background: red;   margin: 0 0 0 5px; }  .divider{   display: inline-block;   position: absolute;   top: 0;   bottom: 0;   width: 1px;   background: black; } 

jsfiddle

that's because both left , right auto.

then, according §10.3.7,

[if] 'left' , 'right' 'auto' , 'width' not 'auto', if 'direction' property of element establishing static-position] containing block 'ltr' set 'left' static position, otherwise set 'right' static-position. solve 'left' (if 'direction 'rtl') or 'right' (if 'direction' 'ltr').

where static position defined as

the static position 'left' distance left edge of containing block left margin edge of hypothetical box have been first box of element if 'position' property had been 'static' , 'float' had been 'none'.

if don't want that, specify value:

.divider {   left: 0; }