CHAPTER 13 ■ BLOCKS
Right Marginal
HTML
<h1>Right Marginal</h1>
<p class="right-marginal"><span class="marginal-header">Problem</span>You want to
excerpt an element and move it to the right margin. <span class="marginal-note">
You want to put images and notes in the margin.</span> You want it to align
vertically with where it would have been placed in the normal flow.</p>
<p class="right-marginal"><span class="marginal-header">Solution</span>You can
create a large right margin and use absolute positioning to move content
into it.<br /><br /> <span class="marginal-header">Disadvantages</span>
Nothing prevents marginal elements from vertically overlapping each other.
<span class="marginal-alert">OVERLAP!</span>
However, you can prevent marginal elements from overlapping with content on
the left by creating a wide enough right margin. <br /><br />
<span class="marginal-header">Advantages</span><img class="marginal-flag"
src="star.gif" alt="star"/>You can render inline markup like tables.</p>CSS
body { width:702px; }
.right-marginal { position:relative; width:480px;
margin-right:210px; margin-left:auto; }.marginal-header {position:absolute; right:-230px; width:170px; font-weight:bold; }
.marginal-note { position:absolute; right:-230px; width:150px;
font-style:italic; font-size:14px; font-weight:normal; }
.marginal-alert {position:absolute; right:-230px; width:150px; font-style:italic; }
.marginal-flag { position:absolute; right:-30px; margin-top:-5px; }