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.

The rule that uses the star html hack (* 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.

Try These

Watch This

yellow
pink

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