floatを使った古典的な入れ子構造で構成

ホーム ＞ HTMLに役立つヒント ＞ CSS Tips ＞ CSSによるページ構成の考察 ＞ float方式例

●このページの構成図

　このページの構造はこんな感じ。上下にタイトルとフッタ、真ん中に#pagebody。

　pagebodyは左半分がleftunit、右にside-bで構成され、さらにleftunitはside-aとcontentsで構成されてます。

#タイトル部 #pagebody #leftunit（サイドA+コンテンツ）float : left; #サイドA float : left; #コンテンツ float : right; #サイドB float : right; #フッタ部（clear:both;）

●IDとclassの二重構造

　各ボックスはIDとclassの二重構造になってます。IDでwidth、classでmargin、padding、borderを指定するのが基本です。

　ここではIDにもborderを指定していますが、構造をわかりやすくするためです。IDのborderは全部削除して使ってください。

●各部のwidth指定

　全体の入れ物、#containerにwidth:800px、左右の#サイドA/Bに150px、#leftunitに648px（ほんとなら650だが、ブラウザのwidth解釈の違いを吸収するために小さめに指定）、#contentsに494pxを指定しています。

　タイトル部とサイドAにはWIN版IE6.0対策のためのアンダーハック（_height:1%;）を入れています。

　Safari/FireFox/IE5.0（OS X）、IE5.0/Netscape 7.0（MAC OS）、IE6.0（Windows）で確認済み。

●サイドバーを下まで延ばすには

　どうもできないようなので、背景に画像を引いてごまかしてください。

　サイドA/B（クラス）にheight:100%;を指定すると、一応のびることはのびますが、位置が変。