XHTMLソース

<div class="container">
 <p>全コンテンツ</p>
 <div class="contentsA">
  <p>コンテンツA</p>
 </div>
 <div class="contentsB">
  <p>コンテンツB</p>
 </div>
 <div class="contentsC">
  <p>コンテンツC</p>
 </div>
 <div class="contentsD">
  <p>コンテンツD</p>
 </div>
</div>

CSSソース【1】

.container {
     width: 608px;
     border: 5px solid #111;
}
.contentsA {
     float: left;
     width: 150px;
     height: 60px;
     border: 1px solid #172FC2;
}
.contentsB {
     float: left;
     width: 150px;
     height: 60px;
     border: 1px solid #666;
}
.contentsC {
     float: left;
     width: 150px;
     height: 60px;
     border: 1px solid #C0C217;
}
.contentsD {
     float: left;
     width: 150px;
     height: 60px;
     border: 1px solid #23C217;
}

CSSソース【2】

.container {
     float: left;
     width: 608px;
     border: 5px solid #111;
}

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