「背景とかを画面幅100%にしたいけどinnerとかは使わない」的なメモ
「コンテンツ（？）部分は幅固定だけど、ヘッダー・フッターとか、一部、背景を画面幅100%にしたい（謎」みたいな時に「.inner」とかを使わないで実現する方法を、みなさまお馴染（？）のヨモツネットさんの記事を参考にして書いたりしていたのですが、久しぶりに使おうと思ったら、忘れてたので、メモ。
横幅が 100% の header を ~inner を使わずに実現する | ヨモツネット（デモ）
前提条件
元記事が読めなかったので、断言出来ないのですが、標準モードではIE6でも問題なさそうな感じでした。
やりたい事を上手く表現出来ないので、図でごまかします。下図のようなレイアウトを実現したい感じです。
書いてみる
HTMLは、下記みたいな感じで、「.inner」とかを使わないで書きます。
HTML
<div id="document">
<div id="header">
<h1>Header</h1>
<!-- /div#header --></div>
<div id="body">
<p>Contents</p>
<!-- /div#body --></div>
<div id="footer">
<h1>Footer</h1>
<!-- /div#footer --></div>
<!-- // div#document --></div>
CSSは、下記みたいな感じです。関係あるトコロだけ書きます。
CSS
#document {
position: relative;
min-width: 960px;
overflow: hidden;
_width: 960px;
_margin: 0 auto;
_position: static; }
#header, #footer {
width: 960px;
/* margin-leftは「padding-leftと、幅の半分を足したサイズ」をマイナスする */
margin-left: -5480px;
padding: 0 5000px;
position: relative;
left:50%; }
/* 今回、メインコンテンツ部分は普通（？）に */
#body {
width: 960px;
margin: 0 auto; }
「padding」の値は適当に。 「どのくらいの画面サイズを想定するか」ですかね。
条件によっては上手くいかない場合もあるかもしれません。 デモは下記。