It's a great way to change background colors site wide.

But it seems so horribly broken for what it's used for.

The tools given aren't particularly sane for page layout. One should be able to set up whatever constraints (equal, proportional, parallel, etc) as needed and the agent displaying the content finds a suitable solution. As an example, the login div must be equal width as the sidebar div, the sidebar div is at the left of the screen, the navbar is at the top of the screen and above the sidebar, and the content div is below the navbar and to the right of the sidebar. If everything is in a box, it would make sense to use other boxes as a reference point, rather than the screen. Tables are much more intuitive for layout purposes, but simply aren't capable enough. We can do what we need with CSS, but everything along the way is a messy hack.

Why would a spec for something that needs to be pixel-precise not come with an example implementation?

If the point is to separate content and presentation, then why must I change the content to get the effect I want?