XHTMLソース

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

CSSソース

#contents {
	width: 760px;
	float: left;
	padding-bottom: 10px;
}
#main {
	float: left;
	width: 500px;
	background: #272727;
}
#sub {
	float: right;
	width: 250px;
	background: #C0C217;
}
#footer {
	width: 760px;
	clear: both;
	height: 80px;
	margin-bottom: 20px;
	background: #ACACAC;
}

XHTMLソース

<div class="container">
 <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ソース

.container {
	width: 100%;
}
.contentsA {
	float: left;
	width: 100px;
	height: 100px;
	background: #172FC2;
}
.contentsB {
	float: left;
	width: 100px;
	height: 100px;
	background: #ACACAC;
}
.contentsC {
	clear: both;
	float: left;
	width: 100px;
	height: 100px;
	background: #C0C217;
}
.contentsD {
	float: left;
	width: 100px;
	height: 100px;
	background: #23C217;
}

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