XHTMLソース

<div id="contents">
 <div id="main">
  <p>#main</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
 </div><!-- end main -->
 <div id="sub">
  <p>#sub</p>
 </div><!-- end sub -->
</div><!-- end contents -->

CSSソース

#contents {
     position: relative;
     width: 760px;
     margin-bottom: 10px;
     background: url(img/bg.gif) repeat-y;
}
#main {
     margin: 0 260px 0 0;
     background: #272727;
}
#sub {
     position: absolute;
     top: 0;
     left: 510px;
     width: 250px;
     background: #C0C217;
}

• 第3章 用途と目的に合わせたレイアウトの法則