CHAPTER 19 ■ CALLOUTS AND QUOTESRight Marginal Callout
Problem You want to excerpt text out of the normal flow and move it into the right margin as a
callout. You want items in the margin to be positioned vertically where they would have
been in the flow. You do not mind using fixed widths. You do not use many callouts, so the
risk of overlap is minimal.
Solution You can indent text to create a margin on the right and then use absolute positioning to
remove content from the normal flow into the margin.
You can use margin-right to indent the terminal block. You can use position: relative
to position the block 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. Without a fixed width, content reflows when the viewport resizes, and
reflow may change the vertical location of callouts, causing them to overlap.
You can assign an inline element to the callout class. You can use position: absolute to
remove the inline element from the flow. You can use width to size the inline element to fit
into the margin. You can assign a negative value to left to move the inline element into the
left margin. You can use margin-top to move the inline element up or down.
Pattern^
HTML
TEXT
TEXT
CSS
.right-marginal { position:relative; width:+VALUE;
margin-right:+VALUE; margin-left:auto; }
.callout { position:absolute;
right:-VALUE;
width:+VALUE;
margin-top:±VALUE; }
Location This pattern works only on inline elements inside terminal block elements.
Caution The layout created by this pattern does not protect content from overlapping. It is very easy
to move callouts into the margin and to have them overlap each other and other content
moved into the margin.
Tips A callout should be positioned in the text where it makes sense if it were read as part of the
text.
You can combine this pattern with Left Marginal Callout.
This pattern is visually similar to HTML tables, but the markup is more flexible. You can pull
out any inline content and move it into the margin.
Related to Left Marginal Callout; Right Marginal (Chapter 13)