いやぁ。がんばったなぁ、僕。

今日さ、もうこれは「詰み」だな、と思うようなCSSの問題点が出たんですよ。
IEのバグとCSSの仕様の問題と、あとデザインの無茶振りによって引き起こされた「詰み」がさ。

けど、回避した。
仕事中に吼えたもんな。解決したとき。思わず吼えた。

それでは、どういう状況でどうなっていったかを記述していきましょう。

■サイトの要素はだいたい800pxぐらいで、中央にそろえたい。

■広がりを持たせるため、そのヘッダー部分の右だけを追加で300pxぐらい出したい。

■だから、見た目的には、真ん中にコンテンツは全部そろってるけど、右にぴょっと出てる要素がある。

■その場合、中心の線はコンテンツの中心線。800pxが中心。1100pxの中心ではズレてる。

■もちろんだけど、横スクロールバーとかナンセンスですよね？

■右だけ追加ゾーンは背景で。ぼかされながら広がってるので、ブラウザで狭く見てる人は見えなくて良い。

んん！なるほど！
よくわっかんねー要求だな！つーか要求してんの僕です！デザインしたの僕です！
CSSでどこまで粘れるかいってみたいと思います！レッツゴー！

では、挙がった問題点をつらつら書いていきましょう。

コンテンツ自体は800pxで中心なので、まずmargin:0 auto;でもって作ります。
で、右側。これがネックですね。あと、コンテンツに含めないというのも難しい。
どちらにせよ、リキッドに800pxが推移して、その横に300pxが常にある、という状況は、
僕の知識ではposition:absoluteが最適解な気がする。

僕の感覚では、position:absoluteって親がrelativeである必要があると思ったので、
全体をくるんでるcontainerにrelativeをあてます。
その後、一番下に<div id=”right_bg”></div>という空divをつくり、そこで表示させることに。

#right_bg{
position:absolute;
top:0;
left:0;
margin-left:800px;
width:300px;
height:500px;
background:url(img/right_bg.jpg) no-repeat;
}

うん、表示できた、オッケー。

ところが、空divだろうが何だろうが、要素は右に飛び出しているので、
横スクロールバーが出てしまっています。
次はこれを取り除くことに。

横スクロールバーを取り除くには、overflow-x:hidden;を加えれば良いです。
僕はbodyに加えてみました。オッケー。取り除かれました。

ということで、結局あっさり出来たんじゃね？と僕は思ってました。
ところがどっこい。

IEでは、position:relative が親にある場合、子要素がoverflowで隠れないバグ発生。
というか、positionやってるときはoverflowの挙動が怪しいとのこと。
うおおおああ！これは……！

検索すること1時間。
これは「詰み」じゃないか？と思う。

positionをはずさなければ、横スクロールはIEでは消せない。
でもpositionをしなければ、右に置けない。
どっちか立てればどっちか立たず。しかも、結構根本的。
どうしよう？

■結論
htmlにoverflow-x:hiddenしたら、消えました。

何か、CSSデザインの神髄を見た気がします。
bodyとhtmlで挙動がぜんぜん違うんだ……。
ちなみに*にもしてみましたが、その場合もまた違った挙動でした。
まあ、そりゃそうか。*は単にぜんぶだもんね。
つか、overflowで消すならhtmlがいいよってことなのかなぁ？
ともかく、何とか望んだ表示になったのでよしとしましょう。

最近、こういう自分のデザインの無茶振りによるCSSコーディングの圧迫がしんどいので
もうちょっと、こう、プロなんだから、そのへんも考えてデザインしてよって思います。
はい。がんばります。分かってんだけど、ついついぼかしかけたりしちゃうよね！