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).
50%). Then they are both styled with left margin.
- The negative left margin value for the yellow box is the total width of the two boxes divided by two,
- The negative left margin value for the pink box is the width of ‘#yellow’ minus the width of ‘#pink’ divided by two.
We could do without floating the second box, but it is important to make this column a block formatting context. This will prevent the clearing of the yellow box while clearing floats inside the pink 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.
