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: small;
	font-family: Verdana, sans-serif;
	color: white;
}
 
p {
	margin: 0 0 1em;
	padding: 10px;
}
 
#container {
	width: 760px;
	margin: 20px auto 0;
}
 
#header {
	height: 80px;
	margin-bottom: 10px;
	background: #ACACAC;
}
 
#contents {
	float: left;
	width: 760px; 　
	margin-bottom: 10px;
	background: url(img/bg.gif) repeat-y;
} 　
 
#main {
	float: left;
	width: 500px;
	background: #272727;
}
 
#sub {
	float: right;
	width: 250px;
	background: #C0C217;
}
 
#footer {
	clear: both;
	height: 80px;
	margin-bottom: 20px;
	background: #ACACAC;
}

CSSソース：clearfixの例

#contents:after {
	content: ".";
	display: block;
	height: 0px;
	clear: both;
	visibility: hidden;
}

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