CSS Pocket Reference, 3rd Edition

Layout of Absolutely Positioned Elements

In the following sections, these terms are used:

Shrink-to-fit

Similar to calculating the width of a table cell using the automatic table layout algorithm. In general, the user agent attempts to find the minimum element width that will contain the content and wrap to multiple lines only if wrapping cannot be avoided.

Static position

The place where an element’s edge would have been placed if its position were static.

Horizontal layout of nonreplaced absolutely positioned elements

The equation that governs the layout of these elements is:

left + margin-left + border-left-width + padding-left
+ width + padding-right + border-right-width + margin-right + right = width of
containing block

The steps used to determine layout are:

1. If all of left, width, and right are auto, first reset any auto values for margin-left and margin-right to 0. Then, if direction is ltr, set left to the static position and apply the rule given in step 3c. Otherwise, set right to the static position and apply the rule given in step 3a.

2. If none of left, width, and right is auto, pick the rule that applies from the following list:

   1. If both margin-left and margin-right are set to auto, solve the equation under the additional constraint that the two margins get equal values.

   2. If only one of margin-left or margin-right is set to auto, solve the equation for that value.

   3. If the values are overconstrained (none is set to auto), ignore the value for left if direction is rtl (ignore right ...