『Web標準の教科書』各章

第6章第15節（p.459-478）

div#container {
  width: 100%;
  }
div#content {
  width: 70%;
  float: right;
  }
div#sidebar {
  width: 30%;
  float: left;
  }
：
：
<div id="container">
  <div id="content">
    （コンテンツフィールドの内容）
  </div>
  <div id="sidebar">
    （サイドバーの内容）
  </div>
</div>

div#container {
  width: 100%;
  }
div#content {
  width: 70%;
  float: right;
  }
div#sidebar {
  width: 30%;
  float: right;
  }
：
：

div#container {
  width: 100%;
  }
div#content {
  width: 70%;
  float: left;
  }
div#sidebar {
  width: 30%;
  float: right;
  }
：
：

div#container {
  width: 100%;
  }
div#content {
  width: 70%;
  float: left;
  }
div#sidebar {
  width: 30%;
  float: left;
  }
：
：

div#header {
  width: 100%;
  }
div#footer {
  clear: both;
  width: 100%;
  }
：
：
<div id="header">
  （ヘッダーの内容）
</div>
<div id="container">
  <div id="content">
    （コンテンツフィールドの内容）
  </div>
  <div id="sidebar">
    （サイドバーの内容）
  </div>
</div>
<div id="footer">
  （フッターの内容）
</div>

body {
  text-align: center;
  }
div#header {
  width: 80%;
  margin-right: auto;
  margin-left: auto;
  }
div#footer {
  clear: both;
  width: 80%;
  margin-right: auto;
  margin-left: auto;
  }
div#container {
  width: 80%;
  margin-right: auto;
  margin-left: auto;
  }
：
：

body {
  text-align: center;
  }
div#header {
  width: 400px;
  margin-right: auto;
  margin-left: auto;
  }
div#footer {
  clear: both;
  width: 400px;
  margin-right: auto;
  margin-left: auto;
  }
div#container {
  width: 400px;
  margin-right: auto;
  margin-left: auto;
  background: #699 url(/images/container_bcg.gif) repeat-y;
  }
div#content {
  width: 280px;
  float: right;
  background: #9CC;
  }
div#sidebar {
  width: 120px;
  float: left;
  background: #699;
  }
：
：

div#header {
  width: 100%;
  }
div#container {
  position: relative;
  width: 100%;
  }
div#content {
  position: relative;
  top: 0;
  left: 30%;
  width: 70%;
  }
div#sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  }
div#footer {
  width: 100%;
  }
：
：

div#header {
  width: 100%;
  }
div#container {
  position: relative;
  width: 100%;
  }
div#content {
  position: relative;
  top: 0;
  left: 0;
  width: 70%;
  }
div#sidebar {
  position: absolute;
  top: 0;
  left: 70%;
  width: 30%;
  }
div#footer {
  width: 100%;
  }
：
：

div#header {
  width: 100%;
  }
div#container {
  position: relative;
  width: 100%;
  }
div#content {
  float: right;
  width: 70%;
  }
div#sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  }
div#footer {
  clear: both;
  width: 100%;
  }
：
：

div#header {
  width: 100%;
  }
div#container {
  position: relative;
  width: 100%;
  }
div#content {
  float: left;
  width: 70%;
  }
div#sidebar {
  position: absolute;
  top: 0;
  left: 70%;
  width: 30%;
  }
div#footer {
  clear: both;
  width: 100%;
  }
：
：

div#header {
  width: 100%;
  }
div#container {
  position: relative;
  width: 100%;
  }
div#content {
  margin-left: 30%;
  }
div#sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  }
div#footer {
  width: 100%;
  }
：
：

div#header {
  width: 100%;
  }
div#container {
  position: relative;
  width: 100%;
  }
div#content {
  margin-right: 30%;
  }
div#sidebar {
  position: absolute;
  top: 0;
  left: 70%;
  width: 30%;
  }
div#footer {
  width: 100%;
  }
：
：

div#header {
  width: 100%;
  }
div#container {
  width: 100%;
  }
div#wrapper {
  float: left;
  width: 80%
  }
div#sidebarB {
  float: right;
  width: 20%;
  }
div#content {
  float: right;
  width: 70%;
  }
div#sidebarA {
  float: left;
  width: 30%;
  }
div#footer {
  clear: both;
  width: 100%;
  }
：
：
<div id="container">
  <div id="wrapper">
    <div id="content">
      （コンテンツフィールドの内容）
    </div>
    <div id="sidebarA">
      （サイドバーAの内容）
    </div>
  </div>
  <div id="sidebarB">
    （サイドバーBの内容）
  </div>
</div>

div#header {
  width: 100%;
  }
div#container {
  position: relative;
  width: 100%;
  }
div#content {
  position: relative;
  top: 0;
  left: 20%;
  width: 60%;
  }
div#sidebarA {
  position: absolute;
  top: 0;
  left: 0;
  width: 20%;
  }
div#sidebarB {
  position: absolute;
  top: 0;
  right: 0;
  width: 20%;
  }
div#footer {
  width: 100%;
  }
：
：
<div id="container">
  <div id="content">
    （コンテンツフィールドの内容）
  </div>
  <div id="sidebarA">
    （サイドバーAの内容）
  </div>
  <div id="sidebarB">
    （サイドバーBの内容）
  </div>
</div>

div#container {
  position: relative;
  width: 100%;
  }
div#content {
  position: absolute;
  top: 0;
  left: 20%;
  width: 60%;
  }
div#sidebarA {
  float: left;
  width: 20%;
  }
div#sidebarB {
  float: right;
  width: 20%;
  }
：
：

div#header {
  width: 100%;
  }
div#container {
  position: relative;
  width: 100%;
  }
div#content {
  width: 60%;
  margin-left: 20%;
  margin-right: 20%;
  }
div#sidebarA {
  position: absolute;
  top: 0;
  left: 0;
  width: 20%;
  }
div#sidebarB {
  position: absolute;
  top: 0;
  right: 0;
  width: 20%;
  }
div#footer {
  width: 100%;
  }
：
：

第6章 第15節（p.459-478）

Chapters

第6章第15節（p.459-478）