Pro HTML5 and CSS3 Design Patterns

CHAPTER 13 ■ BLOCKS

Right Marginal

Problem You want to excerpt elements out of the normal flow and move them into the right margin.
These elements could contain headers, notes, tips, alerts, comments, images, and so on.
You want elements in the margin to be positioned vertically where they would have been in
the flow. You do not mind using fixed widths.

Solution You can indent a block to create a margin on the right and then use absolute positioning to
remove elements from the normal flow into the margin.
You can mark up a terminal block element with the right-marginal class to make it easy to
select. You can indent it using margin-right. You can set it to position:relative,
position:absolute, or position:fixed so its inline children can be positioned relative to
its margin. You can use margin-left:auto and width to fix the width of the terminal block
so that the content does not reflow when the viewport resizes. Reflow may change the
vertical location of marginal elements, which could cause them to overlap. You can set the
width of or the width of one of the terminal block’s ancestors to a fixed
measurement to prevent the block from moving to the right as the viewport grows larger.
You can mark up a marginal element with a class that describes its purpose, such as
marginal-header, marginal-note, and so forth. You can use position:absolute to remove
the inline element from the flow, and you can use a negative value in right to move it into
the right margin. You can use margin-top to move the inline element up or down. You can
use width to size the inline element to fit into the width of the margin.

Pattern

HTML

CSS

<TERMINAL-BLOCK class="right-marginal">

<INLINE-TEXT class="marginal-TYPE"> text </INLINE-TEXT>

<img class="marginal-TYPE" src="FILE.EXT" alt="ALT_TEXT" />

</TERMINAL-BLOCK>

.right-marginal { position:relative; width:+VALUE;

margin-right:+VALUE; margin-left:auto; }

.marginal-TYPE { position: absolute;

right: -VALUE;

width: +VALUE;

margin-top: ±VALUE; }

Location This pattern works on any element.

Caution The layout created by this pattern does not protect elements from vertically overlapping in
the margin. You need to plan carefully to avoid this problem.

Tips You can combine this pattern with Left Marginal.
This pattern is visually similar to HTML tables, but the markup is more flexible. You can pull
out any element and move it into the margin.

Related to Left Marginal; Box Model (Chapter 4); Margin (Chapter 6); Positioning Models, Positioned,
Closest Positioned Ancestor, Absolute, Relative (Chapter 7); Offset Absolute and Offset Fixed
(Chapter 8); Marginal Dropcap, Marginal Graphic Dropcap (Chapter 18); Right Marginal
Callout (Chapter 19); Right Marginal Alert (Chapter 20)