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).
All boxes sit next to each other. The centering is done via "text-align:center", hence the need to reset this value in the box themselves.
Note the need to style the containing block with a minimum width. This is because these boxes would drop under each other if there was not enough room for them on the line.
Units may be mixed (px, %, em, etc.).
IE 6 and 7 do not really support ‘inline-block’ (altough they think they do). These browsers would center the boxes, but would also stack them on top of each other 🙁
The fix is to use:
display: inline;
zoom: 1;White space comes into play here, so to prevent a gap between the boxes, we need to keep closing and opening tags together:
<div id="aqua">aqua
</div><div id="yellow">yellow
</div><div id="pink">pink</div>The following is a technique used by YUI3 grid to kill white space without editing the markup:
letter-spacing: -0.31em;
*letter-spacing: normal;
word-spacing: -0.43em;