If your pixels are square, this is to 1px = 2" scale, although the lines should be a single pixel thick, rather than 2px. Note that court dimensions are to the outside of the defined area (other than the centered centerlines, of course).
After some misadventures with "float" and more study, I have a solution that works in all three browsers I have handy, Firefox 1.x, Opera 8.5, and MSIE 6.0.
Danny Goodman explained that "absolute" was relative to the containing block. It took a while longer to figure out that that only makes "absolute" relative (the way I want it) when the containing block is positioned "relative." (Or "absolute," for that matter; anything other than the "static" default.) It hurts your head, until you get it, and then it scares you because things like this paragraph actually make sense.
What matters for this is: all three browsers produce the same result when we position each box absolute, within a relative container:
This text should be over the top of the court's boxes, and indeed it is. With no margin setting, it appears to inherit the 5% margin setting from the body... but only for the top, and not the sides, go figure. IE has this container spilling over the right edge, inverting the sense of margin-right?!
The center marks took some head-scratching until I figured out that IE was quietly enforcing a minimum height of about 10px. I could reduce the height by specifying a small font size (in spite of there not being any text in the <div>), but I couldn't make it go away. The fix is to use a border on only one edge and let the rest of the oversized box be green on green.
This is valid CSS (and valid HTML) and is utterly hosed on MSIEv6. Welcome to the CSS Adventureworld.
So how do we work around Internet Explorer's bugs? Floating elements are not fitting in their boxes the way they're supposed to; and the empty <div> is being forced to have height I don't want. Is the former a fundamental CSS box model error in IE, with the size of the content, padding, border, and margin not properly accounted for? I couldn't find anything specific that talked about what I'm seeing here for IEv6. It's possible to work around it sizing elements with more clearance (3px, usually).