You’re viewing an archive of outdated material. Visit The Web Standards Project’s updated site to learn about our current mission.

margin-right problems

The following is the stylesheet for this document.

  DIV { border: 10px solid red;   
        padding: 10px 5%;
        margin-left: 0;
        margin-right: auto; 
      }
  DIV.outer { width: 60%; margin-top: 10px; }
  DIV.inner { width: 100%; }
  DIV.correct { border-color: green; width: 60%; margin-top: 10px; }
  BODY { margin: 0; padding: 0; }

There now follow two red nested DIVs, correctly rendered.

This is the text in a DIV in a DIV!
This should have the same width as the outer DIV above.

The CSS1 specification says, in section 4.1.2:

The horizontal position and size of a non-floating, block-level element is determined by seven properties: 'margin-left', 'border-left', 'padding-left', 'width', 'padding-right', 'border-right' and 'margin-right'. The sum of these seven is always equal to the 'width' of the parent element.

If exactly one of 'margin-left', 'width' or 'margin-right' is 'auto', the UA will assign that property a value that will make the sum of the seven equal to the parent's width.

If none of the properties are 'auto', the value of 'margin-right' will be assigned 'auto'.

Therefore, in the example above, whether margin-right is set to 0 or to auto should make no difference, as if it is 0, Opera should set it to auto automatically (no pun intended).

It doesn't. Instead, it somehow increases the width of the outer DIV. On this test Opera acts correctly, by setting margin-right to a negative value, and thus moving the right border off the side of the BODY.

There is the main version of this test with margin-right: 0, showing that Opera does not follow the specification in this respect.