centering of absolutely positioned elements using margin: auto; doesn't work with max-width

Duplicate Issue #102115 • See Issue #212445

Details

Created
Apr 27, 2014
Privacy
This issue is public.
Duplicates
See progress on Bug #212445
Found in build #
0.0010
Reports
Reported by 0 people

Sign in to watch or report this issue.

Steps to reproduce

URL = http://www.freewebs.com/the-dees/iepp1/226-abs-pos-max-width-margin-auto.html

URL:
http://www.freewebs.com/the-dees/iepp1/226-abs-pos-max-width-margin-auto.html

REPRO STEPS:
Create a relatively positioned element, define its width to be e.g. 100em;
Inside create an absolutely positioned element. Define max-width to be 80em; left: 0; right: 0; margin: 0 auto;

EXPECTED RESULTS:
margin-left and margin-right should be computed to have equal values, visually: the absolutely positioned element should be horizontally centered inside the relatively positioned element.

ACTUAL RESULTS:
margin-left is set to 0, visually resulting in an element that is put on the left of the relatively positioned element.

(It’s margin-right for direction: rtl; sites).

=============================

Also reported via: https://github.com/IEuserAgents/UAIssueTracker/issues/58

This is a reduction of an issue we ran into with the status.modern.ie header (the code was taken from modern.ie and adapted)

https://dl.dropboxusercontent.com/u/444684/ie/header-reduction.html
.foo {
position: absolute;
right: 0;
left: 0;
margin: 0 auto;
max-width: 810px;
outline: 1px solid green;
}

Expected:

In IE8, Chrome, Safari, Presto-Opera, and Firefox the element is centred.

Actual:

In IE9, 10, and 11, the margin is ignored and the element is against the left edge of the viewport.

In this particular demo the absolute positioning is not needed to centre the element (removing it would make it work cross browser) but it was used by the actual site to move the element into place.
 

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Rossen A.”

      Changed Steps to Reproduce

      Changed Status to “Confirmed”

      Changed Assigned To from “Rossen A.” to “Peter S.”

      Changed Assigned To from “Peter S.” to “Patrick R.”

      Changed Status from “Confirmed” to “Duplicate”

      Changed Steps to Reproduce

    You need to sign in to your Microsoft account to add a comment.

    Sign in