CHAPTER 19 ■ CALLOUTS AND QUOTES
Left Marginal Callout
HTML
<h1>Left Marginal Callout</h1><p class="left-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 left.
You can use absolute positioning to pull the callout out of the text
and move it into the left margin.</p>CSS
.left-marginal { position:relative; width:470px; margin-left:230px; }.callout { position:absolute; left:-220px; 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; }