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

Margin problems (1)

The following is the stylesheet for this document.

  BODY { margin: 0; padding: 0; }
  DIV { border: 10px solid red;   
        padding: 10px;
        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; }

There now follow two red nested DIVs, the outer one having class outer and the inner one having class inner.

This inner DIV should stick out of the outer 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.

Therefore the inner DIV's margin-right computed value should be set to -20px, and the outer DIV's width should be left at the 60% (meaning 60% of the containing block's width; that is 60% across the inner -- content -- width of the BODY). This should result in the right border of the inner DIV "sticking out" of the outer DIV's by 20 pixels.