CHAPTER 13 ■ BLOCKS
Left Marginal
HTML
<h1>Left Marginal</h1>
<p class="left-marginal"><span class="marginal-header">Problem</span>You want to
excerpt an element and move it into the left 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 flow.</p>
<p class="left-marginal"><span class="marginal-header">Solution</span>You can
create a large left 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 right by creating a wide enough left 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
.left-marginal { position:relative; width:480px;
margin-left:230px; margin-right:auto; }
.marginal-header { position:absolute; left:-220px; width:160px; font-weight:bold; }
.marginal-note { position:absolute; left:-180px; width:150px;
font-style:italic; font-size:14px; font-weight:normal; }
.marginal-alert { position:absolute; left:-180px; font-style:italic; }
.marginal-flag { position:absolute; left:-40px; margin-top:-5px; }