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).
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:
- doubled float-margin bug
display:inline
prevents IE 6 from doubling the margin value (noneless, the computed value is still block).- three pixel text-jog bug
margin-right:-3px;
prevents IE 6 from creating a 3 pixel gutter between the two boxes
With this layout, there is no need to position the wrapper (for IE 6) and the boxes cannot get clipped.