Layouts
Authors have been taking "wrappers" for granted, but to better embrace HTML5 and semantics they should find alternative methods to common techniques (e.g., centering layouts with auto margin).
The two boxes are floated and relativeley positioned with a left offset (50%). Then the first box is styled with a negative left margin which is the total width of the both boxes divided by tw.
To better understand this type of construct, and our use of position:relative; left:50%;, you may want to edit the rules to disable both declarations for each box.
In IE 6 and 7, the parent container must be a positioning block to prevent breakage when the user resizes the viewport (may not be necessary when the container is the initial containing block).
In IE 6, the negative margin will not kick in on page load if the container is styled with a background image.
Because the offset is done in relation to the center of the containing block, containers could be clipped depending on the width of the viewport and the values being used.
