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 they are both styled with left margin.

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.

Try These

Watch This


Check This

<div id="yellow">yellow</div> <div id="pink">pink</div>

Edit This

Use shift + enter to create new lines (even in Safari and Chrome).