## With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

No credit card required

### 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 ...`

## With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

No credit card required