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

We float the two first boxes (one to the left, the other to the right) and we make the last box a block formatting context so its border box fits in between the two floats.

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