レイアウトは、<div> を使って、float 制御をする事で実現できる。
各ブロックの <div>が、header, rsidebar, lsidebar, content, footer で定義されている以下のようなページがあったとする。
図1: フロー制御を何もしない時の、div ブロックの配置
上から順番に左詰で <div> のブロックが置かれて行っている。
content の左側が空いているのでは、左側に 180 px の margin を指定しているためで、全て左詰で <div> のブロックが置かれて行っている。実はcontent の右側にも margin を置いてある。右側も空いているのはそのためであり、width は指定しないので、ブラウザーの幅に応じて、左右に 180px のmargin を残したまま、content のブロックの幅は変化する。
一方で、rsidebar / lsidebar は、右側にマージンを作っているわけではなく、width で、160px の幅を指定している。
width や、margin を指定していないブロックは、横一杯に箱が広がる、header/ footer が横幅一杯なのはそのためだ。
法則として、特に何も指定しない時は、コードが書かれている順序で、以前の<div>ブロックにくっつくように左詰で、上から下へ <div > が置かれて行く。つまり上詰め左寄せで配置される。これが、<div>配置の「通常の流れ」になり、この「通常のながれ」というイメージを頭にしっかり置いてあると、float も理解しやすい（と思う）。
図１の例は、float 指定を使ったレイアウト指定の変更だけで、以下の様に配置する事ができる。
図2: float制御で、図1の div ブロックの配置を制御
Webの検索や書籍を読んで理解した所によると、float 制御の意味する所として right と指定したら右によって、left と指定したら左によるのはもちろんなのだが、、「float を指定された div は、通常の流れから外れる。」 事を理解する事がとても重要と感じた。
上の例では、lsidebar と、rsidebarに float 制御を指定した。（この言い方は正しいのかな？）
- lsidebar は、 float : left を指定する事で、header の下の左側に配置
- rsidebar は、 float : rightを指定する事で、header の下の右側に配置
lsidevar / rsidebar は、float の指定で「通常の流れ」から外れる。次に 配置される content は、何も指定していないので、「通常の流れ」に従う。content を配置する時点で、「通常の流れ」から外れていないのは、header なので、header の下に続く形で、content が配置される。ただ、上の例のcontent は、左側と右側に sidebar の幅+α だけ、margin を置くように設定しているので、lsidevar / rsidebar とは重ならない。つまり重ならないのは、float 制御のせいでは無く、margin を取っているからだ。
もし content の左右にmargin を指定していない場合は、「通常の流れ」から外れている左右のサイドバーは、content は、全く気にしていないので、以下の図3の様に、左右のサイドバーに重なる形で content が表示される。
はじめの頃は、実際に発生しているブロック配置が float 制御によるものなのか、 margin によるものなのか、良く理解できておらず、思ったと通りのコードが書けずに苦労した。
図3: content に左右の margin を設定していない場合。「通常の流れ」から外れている、左右のサイドバーが contentのブロックから無視されている動きがわかる。
図2 で使用した、lsidevar / rsidebar / content の css の定義は以下の通り。
/* ++++++++++ 左サイドバー・デザイン ++++++++++ */
#lsidebar {
font-size: 0.75em;
border: 1px ridge silver;float:left;
text-align: left;
width:160px;
margin: 0 0px 10px 10px;
}/* ++++++++++右サイドバー・デザイン ++++++++++ */
#rsidebar{
font-size: 0.75em;
border: 1px ridge silver;
float: right;
text-align: left;
width:160px;
margin: 0 10px 10px 10px;
}/* ++++++++++ コンテントのデザイン ++++++++++ */
#content{
text-align: left;
background-color: #ffffff; /* white */
margin-top: 10px;
margin-bottom: 0px;
margin-left:180px;
margin-right:180px;
padding: 0px 5px 0px 5px;
}
図2の配置を達成するためには、これだけで良いような気もするが、もう一つ、footer に工夫する必要がある。footer も何も指定しないで「通常の流れ」に従う人にしておくと、レイアウト上、次の様に footer と サイドバーが重なるような事が発生する。
図4: footer と rsidebar が重なって表示される。
footer は、「通常の流れ」に従う人なので、content の下に上詰め左寄せで配置される。その際に、左右の「通常の流れから外れた」サイドバーを意識できないため、あたかも左右のサイドバーが存在しなような配置がされる。
これを回避するには、 clear: both という指定をする。これをすると、float : right (left ) 指定をした <div> ブロックを、意識した配置(一番下にあるブロックに対して、上詰め左寄せ）がされる。
#footer {
text-align: left;
clear: both;background-color: #ffffff; /* white */
padding: 20px 10px 20px 40px;
margin: 10px 0px 10px 0px;background-repeat: repeat-x;
border-top: solid 1px #999999;}