Margin-friendly <pre> tags

When writing HTML, I often find it handy to use <pre> tags whenever I want to include snippets of source code. <pre> tags are great, because they tell the browser to preserve all whitespace, including indentation, and not to do line wrapping. Unfortunately, this can sometimes cause the browser to extend the page beyond the edges of the browser window.

The CSS properties overflow and width can help to deal with long lines in <pre> tags, as shown here. The browser displays scroll bar(s) in a manner similar to <iframe>s, but without the backward-compatibility headache. This happens when the text inside the <pre> tags would otherwise exceed the width of the browser window.

Here's the CSS code I used for this page:

pre {
  width: 99%;
  overflow: auto;
  border: 1px solid #aaa;
  padding: 0;
  margin: 0;
}

Here's an example (from Isaac Newton's Philosophiae Naturalis Principia Mathematica). Resize your browser window to see it in action!

RULE I

  We are to admit no more causes of natural things than such as are both true
  and sufficient to explain their appearances.

  To this purpose the philosophers say that nature does nothing in vain, and
  more is in vain when less will serve; for nature is pleased with simplicity,
  and affects not the pomp of superfluous causes.

RULE II

  Therefore to the same natural effects we must, as far as possible, assign the
  same causes.

  As to respiration in a man and in a beast; the descent of stones in Europe and
  in America; the light of our culinary fire and of the sun; the reflection of
  light in the earth and in the planets.

I've tested this in Firefox 1.5.0.4 and in MSIE 6. Since it's pure CSS, rather than some IFRAME-based hack, it doesn't do anything particularly stupid in Lynx, w3m, or Dillo. I imagine it works in Opera. I haven't tested other browsers. If it breaks, you get to keep the pieces.

We could make things more pretty using the min-width and max-width properties, but MSIE 6 seems to ignore them (surprise!)