CHAPTER 19 ■ CALLOUTS AND QUOTES
Right Floating Callout
HTML
<h1>Right Floating Callout</h1><p>The main feature of the floating callout is that text can wrap
under and over it because it is a float.<span class="callout">Wraps under and over</span>You can float a callout to the right using <code>float:right</code>.
You can use <code>width</code> to set the callout's width.
You can use <code>margin</code> to put distance between the callout and
text outside the callout. You can use <code>padding</code> to put space
between the callout's internal text and its borders. You can use
<code>position:relative</code> and <code>top</code> to adjust the vertical
position of the callout.</p>CSS
.callout { float:right; width:200px; padding:6px;
margin:10px 30px 10px 40px;
position:relative; top:10px;
font-size:22px; line-height:normal; font-weight:bold;
text-align:center; 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; }