Negative Margins Test

Internet Explorer for Windows’s handling of the box model is such that negative margins will not shift the location of the content box in the direction of the negative margin (as happens on standards-compliant browsers), but instead actually decreases the size of the content box, sometimes reducing it below zero in width or height and causing it to disappear altogether.

Below, you should see a paragraph of red text saying the following: If you're seeing this paragraph, it means that your browser is rendering the CSS correctly and displaying the 400px-wide content box 400px to the left of the main column.

If you're seeing this paragraph, it means that your browser is rendering the CSS correctly and displaying the 400px-wide content box 400px to the left of the main column.

If, on the other hand, all you can see is a great big hole, it probably means that you're using Internet Explorer and its faulty interpretation of the box model has disappeared a great big chunk of content.

This paragraph has a negative margin too, but it doesn't have a fixed width, so IE will display some of it, but not the 200px the negative margin should have shifted it left. That bit just… disappears.

‘Negativity’, the parent article for this test. Constructed by ionfish.