Pro HTML5 and CSS3 Design Patterns

CHAPTER 12 ■ ALIGNING CONTENT

Nested Alignment

Problem

You want to nest alignment contexts. Nested alignment contexts are a unique layout feature

built into CSS. You will probably never need to use it. I have included this design pattern

mainly for completeness.

Solution

You can nest alignment contexts by nesting inline elements and assigning them to different

font-size values. Each nested inline element defines its own independent alignment

context based on the size of the font assigned to the element.

Fontlines define two alignment contexts for each element: the alignment context in which an

element is rendered, and the alignment context an element supplies for its children.

Pattern^

HTML content^

CSS
.CLASS { font-size:±em;
white-space:nowrap;
vertical-align:±em;
left:±em;
position:relative; }

Location This pattern works only on inline elements.

Limitations

Nested alignment contexts work well as long as they stay on the same line. When a nested

alignment context is wrapped to another line, the results vary depending on the browser. In

Opera 11, there is a rendering error when vertical-align: text-bottom is used with

multiple different font sizes. The text can display outside the container.

Tip You can nest inline elements indefinitely to create as many alignment contexts as you want.

Example

In the example, I have three alignment contexts: <div class="ac1">, <span class="ac2">,

and <span class="ac3">. Each is set to three different font sizes: 60px, 30px, and 12px,

respectively. Each font-size defines a different set of fontlines to which child elements can

align. There are six elements using the third alignment context, <span class="ac3">, and

each one is aligned to a fontline or offset from the baseline of <span class="ac2">. <span

class="ac2"> is offset from the baseline of <div class="ac1">.

Notice how ac2’s alignment context is preserved internally while it is aligned to ac1’s

alignment context externally. Internally, each inline element defines its own alignment

context to which its children can be aligned. Externally, each inline element is aligned to the

alignment context of its parent.

Related to

Vertical-Aligned Content, Vertical-Offset Content, Advanced Alignment Example; Positioned,

Relative (Chapter 7); Offset Relative (Chapter 8); Nowrap (Chapter 11)