フッタの重なりを考慮する
先に述べたように、ポジショニング型では、絶対配置した内容が絶対配置していない内容の高さを超えるとフッタが重なってしまうという問題があります。サイドバーとメインのエリアの高さが、どちらが高くなるか分からない場合には、フロート型を採用し、フッタの回り込みを解除する方が無難です。
ただし、フッタの幅をメインコンテンツの幅に合わせた、図12のようなレイアウトであれば、サイドバー分のマージン（左サイドバーなら左マージン）をフッタに設定するだけでOKなので簡単です。フロート型のように回り込みを解除する必要もありません。
図12 メインエリアの幅に合わせたフッタレイアウト
リスト14 CSSソース：フッタにサイドバー分のマージンを設定する
div#sub {
width: 200px;
position: absolute;
top: 0;
left: 300px;
}
div#footer {
margin-left: 210px;
}
サイドバーをメイン領域より上に配置する
これまでのような比較的単純なレイアウトであれば、clearプロパティやclearfixで回り込みを解除してフッタをコントロールできる分、ポジショニング型よりもフロート型でレイアウトする方が簡単だと言えるでしょう。フロート型は、左右の領域を入れ替えるような横の配置が得意です。しかし、後に続く要素をその要素よりも上に配置するような、縦の配置をコントロールしたい場合は、ポジショニングの方が簡単です。
例えば、図13のように、サイドバーをメインコンテンツ領域よりも上に配置するようなレイアウトは、フロート型では難しいレイアウトも、ポジショニング型であれば簡単に実現できます。極端でありますが、フッタコンテンツをヘッダ領域に配置するようなフロート型ではできないレイアウトもポジショニング型では可能になります。
リスト15 （X）HTMLソース：サイドバーをメイン領域より上に配置／07.html
<div id="container"> <div id="header">ヘッダ</div> <div id="main">メイン</div> <div id="sub">サブ</div> <div id="footer">フッタ</div> </div>
図13 サイドバーをメイン領域より上に配置
例では、サイドバーの幅を200pxとし、ヘッダ、メイン、フッタに左マージンを200px指定することで、サイドバーをメイン領域より上に配置するレイアウトを実現しています。
リスト16 （X）CSSソース：サイドバーをメイン領域より上に配置／07.css
div#header{
margin-left: 200px; /* 左マージン200px */
}
div#main {
margin-left: 200px; /* 左マージン200px */
}
div#sub {
width: 200px;
position: absolute; /* 座標（0, 0）に絶対配置 */
top: 0;
left: 0;
}
div#footer {
margin-left: 200px; /* 左マージン200px */
}
