CHAPTER 19 ■ CALLOUTS AND QUOTESRight Floating Callout
Problem You want to remove content from the flow and display it prominently to the reader on the
right side.
In general terms, you want to pull content out of the flow to emphasize it.
Solution A callout is removed from the normal flow and styled to make its content stand out to the
user. It usually has a larger font, margins, borders, and background around the outside to
set it apart from surrounding content. Callouts can include all kinds of content, such as
quotes, key phrases, attention getters, and so on.
You can assign an inline element to the callout class. You can use float:right to float the
inline element to the right content edge of its parent terminal block element. You can use
padding to put distance between the callout’s content and its border. You can use
position:relative to position the callout so you can move it. You can use top to move the
callout up or down. You can use margin-left to put distance between the callout’s left
border and external text. You can use margin-right to move the callout to the left. You can
use margin-top and margin-bottom to put distance between the callout’s top and bottom
borders and external text.
Pattern^
HTML
CSS
.callout { float:right; position:relative;
width:+VALUE;
padding:+VALUE;
margin-top:+VALUE; margin-bottom:+VALUE;
margin-left:+VALUE; margin-right:±VALUE;
top:±VALUE; }
Location This pattern works on any element.
Limitations If you right-float any other elements close to where the callout is floated, they may stack
next to each other. This would likely detract from the callout effect. Floats tend to bring out
bugs in browsers.
Tip A callout should be positioned in the text where it makes sense if it were read as part of the
text.
Related to Left Floating Callout, Center Callout; Floated Box (Chapter 4); Width (Chapter 5); Margin,
Padding (Chapter 6); Float and Clear, Relative Float (Chapter 7); Offset Float (Chapter 8)