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).

All boxes are floated and relativeley positioned with a left offset (50%). The negative margin for the first box is equal to the total width of the columns divided by two. The left margin for the second box is the delta between the width and margin of the first column.

If the first column is wider than half of the total width of the three columns, then there is no need to style the second box with a margin.

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).

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="aqua">aqua</div> <div id="yellow">yellow</div> <div id="pink">pink</div>

Edit This

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