文書構造を極力いじらずにレイアウトを変更できるようなフレームワーク。 以下の各サンプルでは分かりやすいように head 要素内の style 要素でスタイルを指定、先頭で defaultReset.css と common.css をインポート。 実際に使用する際には、style 要素ではなく link 要素で core.css などにリンクして、そこに defaultReset.css などとともに layout.css としてインポート。
この文書の詳細については、「CSSによる段組レイアウトのフレームワーク」を参照してください。
文書構造は以下の通り。メイン、サブの順番。
div.container -div#head -div.content --div#mainContent ---div.section --div#subContent ---div.section -div#foot
positionを使った可変幅は、内容量、ウィンドウ幅によってはフッタ部分がサイド部分に重なってしまいますので、フッタ部分をメインと同じ幅にしたものが実用的です。
文書構造は以下の通り。div#subContent の後に div#extraContent を追加して、メイン、サブ、エクストラの順番。
div.container -div#head -div.content --div#mainContent ---div.section --div#subContent ---div.section --div#extraContent ---div.section -div#foot
positionを使った可変幅は、内容量、ウィンドウ幅によってはフッタ部分がサイド部分に重なってしまいますので、フッタ部分をメインと同じ幅にしたものが実用的です。