CHAPTER 19 ■ CALLOUTS AND QUOTES
Right Marginal Callout
HTML
<h1>Right Marginal Callout</h1><p class="right-marginal">
<span class="callout">Text does not wrap under...</span>The main feature of the marginal callout is that text does not wrap
under or over the callout because the callout is in the margin.
You can indent the block to make room for the callout on the right.
You can use absolute positioning to pull the callout out of the text
and move it into the right margin.</p>CSS
.right-marginal { position:relative; width:490px; margin-right:230px; }.callout { position:absolute; right:-200px; width:160px; margin-top:5px;
line-height:normal; text-align:center; padding:5px 0;
font-size:22px; font-weight:bold;
color:black; background-color:gold;
border-left:1px solid black; border-right:1px solid black;
border-top:6px solid black; border-bottom:6px solid black; }