CHAPTER 20 ■ ALERTS
Right Marginal Alert
HTML
<div class="main">
<p>Text above the alert.</p>
<div class="alert tip">
<h3><span class="decoration"> </span>Tip</h3>
<p>The Right Marginal Alert design pattern moves the entire alert into the
right margin. Inside the alert itself, its heading is absolutely positioned
to the left and its paragraph to the right.</p>
</div>
<p>Text below the alert.</p>
<p>Notice how the alert is removed from the flow and moves into the margin.
Unlike the Floating Alert, you have to size the right or left margin
to make room for the marginal alert.</p>
</div>CSS
*.main { position:relative; padding-right:400px; }
*.alert { position:absolute; width:350px; right:0; height:190px;
border-top:1px solid black; border-bottom:1px solid black; }
*.alert h3 { position:absolute; left:0; top:15px; margin:0;
font-size:1.3em; text-transform:uppercase; }
*.alert p { position:absolute; left:80px; top:15px; margin:0; }
*.alert.tip { color:green;
border-top:4px groove green; border-bottom:4px ridge green; }
*.alert *.decoration { border-left:15px solid gold;
margin-right:-11px; font-size:0.7em; vertical-align:2px; }