ホーム ＞ HTMLに役立つヒント ＞ CSS Tips ＞ CSSによるページ構成の考察 ＞ 絶対位置指定方式例
このページの構成は単純です。上下にタイトル部とフッタ部、真ん中に#pagebodyがあり、その中にコンテンツと両サイドが並列にあります。
#container部（<body>〜</body>まで全体）
|
HTML上の構成も単純です。構造が単純なので、間違えて構成が乱れるようなことも起こりにくいでしょう。直感的で分かりやすいです。
|
<body>
</body> |
このページでは、#containerのwidth指定を外し、左右に30pxの空きをあけてウインドウサイズに追従するようにしてみました。このように、横幅は固定にも可変にもできます。
widthの解釈の違いよるずれも起こらず、一見良さそうです。ところが、両サイドがabsolute指定されていて、ページの他の要素から独立しています。このため、コンテンツ部が両サイドより短くなると、両サイドはフッタにかぶさります。
また、ユーザーが文字の大きさを大きくした場合も、同様の現象が起こってしまいます。
右サイド部分です。side-bで指定されています。widthは150pxです。
右サイドをなしにするには、サイドB部分をさっくり削除するだけです。