During the lecture this week, we saw an edge case like the following:

Where the blue box has the following CSS properties:

left: 50px;
width: 100px;
right: 50px;

The problem is: it is not possible to make the box satisfies all of the three conditions (except under some edge circumstance where the screen size happens to make it possible):

• 50px away from the left edge of its nearest positioned ancestor
• 50px away from the right edge of its nearest positioned ancestor
• Be 100px wide

So, we have to ignore one of the three properties, actually, the Browser.

There are some edge cases like this one when we deal with HTML and CSS. Sometimes we will be able to tell the answers while sometimes not. The good thing is, the behaviour is deterministic for a specific browser (or most modern browsers will share similar behaviours, as there are only three major browser engines: Blink, WebKit, and Gecko).

And we will need to refer to some official documents. Most of the time, we can find the answers from the CSS specifications from w3.org.

The problem we are talking about is one example: https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-width. The problem we have right now is called “over-constrained”:

If none of the three is ‘auto’: If both ‘margin-left’ and ‘margin-right’ are ‘auto’, solve the equation under the extra constraint that the two margins get equal values, unless this would make them negative, in which case when direction of the containing block is ‘ltr’ (‘rtl’), set ‘margin-left’ (‘margin-right’) to zero and solve for ‘margin-right’ (‘margin-left’). If one of ‘margin-left’ or ‘margin-right’ is ‘auto’, solve the equation for that value. If the values are over-constrained, ignore the value for ‘left’ (in case the ‘direction’ property of the containing block is ‘rtl’) or ‘right’ (in case ‘direction’ is ‘ltr’) and solve for that value.

This is why the right attribute seems to be dropped.