CHAPTER 20 ■ ALERTS
Floating Alert
HTML
<h1>Floating Alert</h1>
<p>Text above the alert.</p><div class="alert note">
<h3><span class="decoration"> </span>Note</h3>
<p>The Floating Alert design pattern floats the entire alert. Internally it also
floats the alert's heading 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. Also notice how the browser
automatically shrinks the right margin of this text so that it does not
collide with the left margin of the floated alert.</p>CSS
*.alert { float:right; width:350px; margin-left:20px;
border-top:1px solid black; border-bottom:1px solid black; }*.alert h3 { float:left; width:50px; margin:10px 0;
font-size:1.3em; text-transform:uppercase; }*.alert p { float:right; width:250px; margin:10px 0; }*.alert.note { color:blue;
border-top:2px groove blue; border-bottom:2px ridge blue; }*.alert *.decoration { border-left:15px solid gold;
margin-right:-11px; font-size:0.7em; vertical-align:2px; }