XHTMLソース

<div id="a">
 <p>AAA</p>
 <p>AAA</p>
 <p>AAA</p>
</div>
<div id="b">
 <p>BBB</p>
 <p>BBB</p>
 <p>BBB</p>
</div>
<div id="c">
 <p>CCC</p>
 <p>CCC</p>
 <p>CCC</p>
</div>
<div id="d">
 <p>DDD</p>
 <p>DDD</p>
 <p>DDD</p>
</div>

CSSソース

body {
	margin: 20px;
	padding: 0;
	font-size: 75%;
	line-height: 1.5;
}
p {
	margin: 1em;
}
#a {
	width: 120px;
	padding: 1px 0;
	background: #F75C9A;
}
#b {
	width: 120px;
	padding: 1px 0;
	background: #92CE1F;
	position: static;
	top: 100px;
	left: 180px;
}
#c {
	width: 120px;
	padding: 1px 0;
	background: #3A99E9;
}
#d {
	width: 120px;
	padding: 1px 0;
	background: #CCCCCC;
}

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