意外的CSS行为？

Question

While playing around with divider lines that take the full height of a container without a parents height, I stumbled across the below scenario. Can any one figure out why setting the dividers to position:absolute and display:inline-block does not cause them to float all the way to left of the parent container like expected? Why are they actually 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

Answer 1

That's because both left and right are auto .

Then, according to §10.3.7 ,

[If] 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direction' property of the element establishing the static-position] containing block is 'ltr' set 'left' to the static position , otherwise set 'right' to the static-position . Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').

Where the static position is defined as

The static position for 'left' is the distance from the left edge of the containing block to the left margin edge of a hypothetical box that would have been the first box of the element if its 'position' property had been 'static' and 'float' had been 'none'.

If you don't want that, specify a value:

.divider {
  left: 0;
}

Answer 2

Can any one figure out why setting the dividers to position:absolute and display:inline-block does not cause them to float all the way to left of the parent container like expected?

Because you did not specify a left value, so it is implicitly auto , and that means their left edge is positioned at the place they would have in normal flow, if they were not absolutely positioned.

This behavior is described and specified here: http://www.w3.org/TR/CSS21/visudet.html#static-position

---

And btw., setting display: inline-block has no effect here, the calculated value of display will be block automatically, see http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo

display: inline-block is necessary here to make the elements take their static position in between the boxes in the first place – so it is necessary for the observed effect to work. (Only “after” position:absolute is applied, the computed value will become block .)

---

And the technique you have chosen to position those dividers here might not be the best choice, at least if your layout is fluid – narrow the result window of your fiddle to a point where the three red boxes don't all fit onto one line, and you'll see what I mean …

Answer 3

If you want all dividers to stay on the left of their parent, change their display style

instead of:

display: inline-block;

use:

display: block;