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: 0; 
      }
  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, incorrectly 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.

There is an other version of this test with margin-right: auto, showing what should happen with this test.