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).
This is pretty straightforward. We only float the first box. The second box is width-less. It is styled to make sure that clearing inside #pink does not clear #yellow (as the first box, it creates a block formatting context). The gap to the right and left of the layout is done via left and right margin.
* html) is for IE 6. It contains declarations that fix two bugs:
With this layout, there is no need to position the wrapper (for IE 6) and the boxes cannot get clipped.