単純な3カラムはfloatで並べれば実現できる

XHTMLソース

<div id="container">
 <div class="contentsA">
  <p>1</p>
 </div>
 <div class="contentsB">
  <p>2</p>
 </div>
 <div class="contentsC">
  <p>3</p>
 </div>
<!-- / #container --></div>

CSSソース

#container {
     float: left;
     width: 600px;
     border: 1px solid black;
}
div {
     float: left;
     width: 200px;
}
#container div.contentsA {
     background: #EFEF99;
}
#container div.contentsB {
     background: #99EFEF;
}
#container div.contentsC {
     background: #EF99EF;
}

記述順と表示順が一致しないレイアウトを実現する

XHTMLソース

<div id="container">
 <div id="header">
  <p>#header</p>
 <!-- / #header --></div>
 <div id="contents">
  <div id="main_area">
   <div id="main_content">
    <p>#main_content</p>
    <p> テキストテキストテキストテキストテキスト</p>
    <p> テキスト</p>
    <p> テキスト</p>
    <p> テキスト</p>
    <p> テキスト</p>
   <!-- / #main_content --></div>
   <div id="navigation_a">
    <p>#navigation_a</p>
    <p> テキストテキストテキストテキストテキスト</p>
   <!-- / #navigation_a --></div>
  <!-- / #main_area --></div>
  <div id="navigation_b">
   <p>#navigation_b</p>
   <p> テキストテキストテキストテキストテキスト</p>
  <!-- / #navigation_b --></div>
 <!-- / #contents --></div>
 <div id="footer">
  <p>#footer</p>
 <!-- / #footer --></div>
<!-- / #container --></div>

CSSソース：レイアウトA【1】

@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 10px 0;
}
 
#container {
     width: 760px;
     margin: 20px auto 0;
}
 
#header {
     height: 80px;
     margin-bottom: 10px;
     background: #ACACAC;
}
 
#contents {
     width: 760px;
     float: left;
     margin-bottom: 10px;
     background: url(img/bg.gif) repeat-y;
}
 
#main_area {
     float: left;
     width: 550px;
}
 
#main_content {
     float: right;
     width: 340px;
}
 
#navigation_a {
     float: left;
     width: 200px;
}
 
#navigation_b {
     float: right;
     width: 200px;
}
 
#footer {
     clear: both;
     height: 80px;
     margin-bottom: 20px;
}

CSSソース：レイアウトB【2】

#main_content {
     float: left;
     width: 340px;
}
 
#navigation_a {
     float: right;
     width: 200px;
}

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