This box changes shape slightly when you load or resize the page, so that the Mario boxes that make up its border fit together properly, while the page remains fluid.
Why? Because otherwise, unless you make this box a fixed size, you end up with something like this:
We achieve this by adding a left and right margin to the outermost div element to ensure that its total width adds up to a multiple of 32, the width of our background tile, and adding a top and bottom padding to the innermost element to ensure that its height is a multiple of 32. We offset the background position by 50% if the width or height is an odd number of tiles wide or high. This makes the boxes line up properly.
Biggest issue: requires JavaScript. Works fine without it but doesn't look as good, as illustrated in the image on the left. If you can figure out how to achieve this without using JavaScript, you are my hero -- email me at nrkn.com@gmail.com.
Caveats: Some browsers require a refresh after changing the text size. I'm sure this is fixable but I didn't spend any time on it. This page could be improved in many ways, external JS and CSS, the JavaScript isn't great, there is probably unnecessary HTML and CSS etc., but I'm not going to do it, it demonstrates what it set out to demonstrate. It was a quick job to test out an idea. Tested in Firefox, Opera, Safari, IE7. Probably breaks in IE6, untested but if it does break it should be trivial to fix.