XHTMLソース

<div id="container">
 <div id="header">
  <p>#header</p>
 <!-- / #header --></div>
 <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>
  <!-- / #main --></div>
  <div id="sub">
   <p>#sub</p>
  <!-- / #sub --></div>
 <!-- / #contents --></div>
 <div id="footer">
  <p>#footer</p>
 <!-- / #footer --></div>
<!-- / #container --></div>

CSSソース

@charset "utf-8";
 
* {
     margin: 0;
     padding: 0;
}
 
body {
     font-size: 62.5%;
     font-family:Meiryo, Osaka, verdana, arial, sans-serif;
     color: white;
}
 
p {
     margin: 0 0 1em;
     padding: 5px 10px 0;
     font-size: 1.2em;
}
 
#container {
     width: 80em;
     margin: 20px auto 0;
}
 
#header {
     height: 80px;
     margin-bottom: 1em;
     background: #ACACAC;
}
 
#contents {
     width: 80em;
     float: left;
     margin-bottom: 1em;
     background: #C0C217;
}
 
#main {
     float: left;
     width: 59em;
     background: #272727;
     border-right: 1em solid white;
}
 
#sub {
     float: right;
     width: 20em;
     background: #C0C217;
}
 
#footer {
     clear: both;
     height: 80px;
     margin-bottom: 2em;
     background: #ACACAC;
}

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