フロートを利用した2カラムレイアウト

質問

お世話になります。
HTML＋CSSにてサイト制作をしております。IE6のバグだと思うのですが、フロートを利用した2カラムレイアウトの段組みの間の空き具合をうまく調整することができません。なぜでしょうか？？
形は、左右の2カラムで成り立っており、右半分に重要なコンテンツ部分（主にテキスト）、左半分にメニューをおいています。
【HTML】
<div id="wrapper">
<div id="right">
□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□(重要テキスト)
</div>
<div id="left">
□□□□□□□□□(メニュー）
</div>
</div>

【CSS】
#wrapper{
width:800px;
background:url();←省略
}
#right{
float:right;
width:680px;
}
#left{
float:left;
width:100px;
}
という感じです。それで、800px－(680px＋100px)＝20pxを左右の段組みの間に空きスペースとして確保したいのですが、IE6だとうまくいきません。
Firefox,safariなどでは、仕様通り左カラムは左に寄り、右カラムは右によるため、左右の段組みの間に20pxの空きが出るのですが、IE6だと左右の間にスペースはなく、かわりに右カラムの右(つまり、一番右）が空いてしまうのです。
floatを両方ともrightにして左カラムに右マージンorパディングを入れてみたのですが、今度はカラム落ちしてしまいます。
どうすれば、IE6で左右の間にスペースがある2段組みができるのでしょうか？？なにか根本的に間違ってるのでしょうか？

回答No.6

abril · ベストアンサー

> ちなみに、今の状態でメニュー1、2、3のタイトル文字をboxの下半分くらいの位置に表示させようとするとine-heightを使うしかな いのでしょうか？padding-topとかでは不可能なのでしょうか(paddingを試したのですが、効かないようなので)？？
> と、いうのも今だとline-height:450%で位置指定しているので、タイトル文字が長くなって2行にわたる場合だと、2行目がはるか下の方にはみだしてしまいますよね？

そうですね、複数行になる可能性がある場合は、現在の様な極端なline-heightでの調整はお奨めできません。
また、paddingを効かせるには他のプロパティをちょっと調整する必要があります。

という事ですので、2行になる事を想定した場合、ANo.5の回答のままだと不具合が出る様ですので、もう少し修正しました。以下は前回のCSSからの修正部分のみ抜粋してあります。

ul#globalnavi {
zoom: 100%;←liがfloatした事により高さが失われているのでそれをクリアする為の指定（これはIE独自の拡張属性）、続くul#globalnavi:afterとセットでその役目をします
width: 800px;
height: 51px;
margin: 8px 0 10px 0;
padding: 0;
}
ul#globalnavi:after {←上記参照。これは所謂clearfixと呼ばれる手法です。
height: 0;
visibility: hidden;
content: ".";
display: block;
clear: left;
}
ul#globalnavi li {
float: left;
height: 100%;
list-style-type: none;
line-height: 140%;←普通の高さに戻します。この値は文字の表示サイズとのバランスを見ながらお好みで調整して下さい
overflow: hidden;
margin: 0;
padding: 0;
}
ul#globalnavi li a {
display: block;
height: 100%;←親要素ulからの継承している筈のliの高さ（51px）が継承されていない環境があったので再度定義
text-decoration: none;
font-size: 140%;
font-weight: bold;
color: #78635A;
background: transparent url(./images/navi.jpg) no-repeat;
}
/*--メニュー内タイトル--*/
ul#globalnavi li span {
display: block;←block要素化することで、以下に続くpadding-topと、複数行になった場合のpadding-leftが有効に（前回の指定だと2行になった時は1行目しか効いていません）なります
padding: 1em 0 0 30px;←前回までのpadding-leftに加えて、padding-topの値も指定。1emだと大体文字ひとつ分ぐらいの高さの余白になります。この値はお好みで微調整して「タイトル文字をboxの下半分くらいの位置に表示」になる様にして下さい（pxでもかまいません）。
}

こちらの検証ではこれで問題ありませんでしたが、いかがでしょうか？

お礼

うわ～～、できました！
本当に本当にありがとうございます！助かりました！サイトも無事に完成いたしました。なんとお礼を言えばいいものやら。。。

>liがfloatした事により高さが失われているのでそれをクリアする為の指定（これはIE独自の拡張属性）、続くul#globalnavi:afterとセットでその役目をします

>display: block;←block要素化することで、以下に続くpadding-topと、複数行になった場合のpadding-leftが有効に（前回の指定だと2行になった時は1行目しか効いていません）なります

なるほど～～きちんと意味を考えたら、答えはでるんですよね。なんか量が多くなると、いろんな指定をいろんなところでバラバラにやってしまっていて、気がついたらどこがどうなっているのか自分でもわからない。。。そういうふうになってしまっていました。
見切り発車でコーディングに入ると後でたいへんですね。
abril様、本当にありがとうございました！

回答No.5

abril

ANo.4の補足で提供して頂いたソースを元にダミー画像を作成し、検証してみたのですが、その限りでは「「メニュー3」のテキストだけ繰り返されて2回表示されてしまいます。そしてその2個目の「メニュー3」テキストは<ul id="globalnavi">からはみだしてちょうどmenu1のボックスの下あたりに表示されている」という現象はIE6を含めた主要モダンブラウザでの検証でも起こりませんでした。"oevrflow: hidden;"を外せば似たような状況は起こりますが、その場合もはみ出すのはメニュー3だけでなく、1も2も同様ですし…

※ちなみに、"ul#assets_globalnavi li#menu3"となっていたのは"ul#globalnavi li#menu3"の間違いと解釈させて頂きました。でないとHTML側のマークアップと合わないので。

なので、質問者様が直面している問題の原因は特定しかねます。省略されているどこか別のCSSの定義が何か関係しているのかもしれません。
ただ、現状のCSSに関して、こうした方がより考え方としてはベター且つスタイルをすっきりまとめる事ができる、というアドバイスはできますので、以下は現状版にちょっと手を加えてみたそのサンプルです。
※下記サンプル中では「width:800px,height:102pxの1枚画像」の名前を仮にnavi.jpgとしてあります。
---------------------------------------------------------------------
【CSS】/css/sample.css
---------------------------------------------------------------------
body {
height: 100%;←前回までのレスでオリジナルのソースにはこれが入っている様ですが特に指定しなくても可
font-size: 12px;←これは推測で入れてあります
padding: 0;←同上
margin: 0;←同上
}
#wrapper {
width: 800px;
}
#right {
float: right;
width: 680px;
}
#left {
float: left;
width: 100px;
}
ul#globalnavi {
width: 800px;
height: 51px;
margin: 8px 0 10px 0;
padding: 0;←ulのスタイルとして既に初期化済みでしたら不要です
}
ul#globalnavi li {
float: left;←aではなく、liの方をフロートさせます。これにより"display: inline;"は不要に。
height: 100%;←親要素ulの値を継承
list-style-type: none;
line-height: 450%;←こちらもspanではなくliに指定
overflow: hidden;←こちらもaではなくliに指定
margin: 0;←liのスタイルとして既に初期化済みでしたら不要です
padding: 0;←同上
}
ul#globalnavi li a {
display: block;
text-decoration: none;
font-size: 140%;
font-weight: bold;
color: #78635A;
background: transparent url(../images/navi.jpg) no-repeat;←aのスタイルとして共通の部分はここで一括指定します
}
/*--メニュー内タイトル--*/
ul#globalnavi li span {←提供されたソースを見る限り、プロパティの値がみな同じですので、これに個別のクラスが付いている必要はないです。例えば文字色が違う等の個別指定を省略されているのでしたら、異なるその部分だけ、続けて個別指定して下さい。
padding-left: 30px;
}
/*--メニュー背景画像--*/
/*------off*/
ul#globalnavi li#menu1 a {←下記の幅についてはaの疑似クラスの状態を問わず共通なのでここで一括。背景位置についてはa:hoverの時だけ違うが続けて上書き指定するので、これもここでまとめてしまえばa:linkとa:visitedのセレクタを分けて指定しなくても済みます。
width: 266px;
background-position: 0px 0px;
}
ul#globalnavi li#menu2 a {←同上
width: 266px;
background-position: -266px 0px;
}
ul#globalnavi li#menu3 a {←同上
width: 267px;
background-position: -533px 0px;
}
/*------hover*/
ul#globalnavi li#menu1 a:hover {←a:hoverで個別指定が必要なのは背景位置だけなので、ここでその部分だけを上書き。
background-position: 0px -51px;
}
ul#globalnavi li#menu2 a:hover {
background-position: -266px -51px;
}
ul#globalnavi li#menu3 a:hover {
background-position: -533px -51px;
}
---------------------------------------------------------------------
【HTML】
---------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shif_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="./css/sample.css" type="text/css" rel="stylesheet" media="all" />
<title>サンプル</title>
</head>

<body>

<ul id="globalnavi">
<li id="menu1"><a href="1.html"><span class="menu1title">メニュー1メニュー1メニュー1メニュー1メニュー1</span></a></li>
<li id="menu2"><a href="2.html"><span class="menu2title">メニュー2メニュー2メニュー2メニュー2メニュー2</span></a></li>
<li id="menu3"><a href="3.html"><span class="menu3title">メニュー3メニュー3メニュー3メニュー3メニュー3</span></a></li>
</ul>

<div id="wrapper">
<div id="right">
右。メインコンテンツ
</div>
<div id="left">
左。メニュー。
</div>
</div>

</body>
</html>
---------------------------------------------------------------------

いかがでしょうか？これでIE6/7、Firefox、Opera、Safariのいずれも支障なく表示される様ですが。

お礼

ありがとうございますー！！
無事にすべて解決いたしました！abrilさんのご指摘通りに、CSSを修正したところ、問題なく表示できました。
ひとつずつの解説も、わかりやすく「なるほど～、そういう風にするんだ」と納得しながらすすめることができました。
なんか、ちょいちょい違いましたね、私のは。そういうのが、積もりつもっておかしなことになるんですね。はあ～。
abrilさんには、ほんとうに長丁場お付き合いくださり、ありがとうございました！また迅速なご回答もほんとに助かりました。ありがとうございます！
あと、ほんとにほんとにラストです。。。ちなみに、今の状態でメニュー1、2、3のタイトル文字をboxの下半分くらいの位置に表示させようとするとine-heightを使うしかないのでしょうか？padding-topとかでは不可能なのでしょうか(paddingを試したのですが、効かないようなので)？？
と、いうのも今だとline-height:450%で位置指定しているので、タイトル文字が長くなって2行にわたる場合だと、2行目がはるか下の方にはみだしてしまいますよね？
なにか、方法があるのでしょうか？？

回答No.4

abril

> 長方形の画像をh2の背景においていたので、ぴったりになるようwidth指定をしてしまっていました。

ひとまず問題が解決された様で、良かったです。
で、別件ですが：

> 「メニュー3」のテキストだけ繰り返されて2回表示されてしまいます。そしてその2個目の「メニュー3」テキストは<ul id="globalnavi">からはみだしてちょうどmenu1のボックスの下あたりに表示されている、という訳のわからない状態です。IE6でのみ発生しています。

ソースの詳細を見ないと断定はできませんが、おそらくメニューの<li>を「それぞれ左にフロートさせて、3つのBOXが横並びに配置」しているという作りからして、やはりfloatに絡む状況で起こるバグだと思います。過去、他の方の質問や実体験でも多分同様？と思われる現象を見た記憶があります。

ANo.3でお書きになられた補足から大体のCSSは推測できるのですが、できるだけ実際のul#globalnaviとその子要素のCSSを補足して頂けませんか？おそらく、ul#globalnavi liに所謂clearfixの様な対応を仕込む事で解消される現象だろうとは思うのですが。
※なお検証環境等の都合で次のレスはちょっと間が空く（今晩or明日）になってしまうかもしれません。その間に他の方から適切な回答があった場合はそのままスルーさせて頂きます。

お礼

本当に、本当にありがとうございます！すっかり甘えてしまいました。。。
>過去、他の方の質問や実体験でも多分同様？と思われる現象を見た記憶があります。

そうなんですね、調べてみます。
ちなみに以下がソースとCSSになります。お手数をおかけ致しますが、どうぞ宜しくお願い致します。
【HTML】
<ul id="globalnavi">
<li id="menu1"><a href="□□1.html"><span class="menu1title">メニュー1</span></a></li>
<li id="menu2"><a href="□□2.html"><span class="menu2title">メニュー2</span></a></li>
<li id="menu3"><a href="□□3.html"><span class="menu3title">メニュー3</span></a></li>
</ul>

補足

【CSS】
ul#globalnavi{
margin : 8px 0 10px 0;
width : 800px;
height : 51px;
}
ul#globalnavi li{
list-style-type : none;
display : inline;
}
ul#globalnavi li a{
height : 51px;
display : block;
float : left;
text-decoration : none;
overflow : hidden;
font-size : 140%;
font-weight : bold;
color : #78635A;
}
/*--メニュー内タイトル--*/
.menu1title{
padding-left : 30px;
line-height : 450%;
}
.menu2title{
padding-left : 30px;
line-height : 450%;
}
.menu3title{
padding-left : 30px;
line-height : 450%;
}
/*--メニュー背景画像--*/
/*------off*/
ul#globalnavi li#menu1 a:link,ul#globalnavi li#menu1 a:visited{
background: transparent url(../images/○○.jpg) no-repeat 0px 0px;
width: 266px;
}
ul#globalnavi li#menu2 a:link,ul#globalnavi li#menu2 a:visited{
background: transparent url(../images/○○.jpg) no-repeat -266px 0px;
width: 266px;
}
ul#assets_globalnavi li#menu3 a:link,ul#assets_globalnavi li#menu3 a:visited{
background: transparent url(../images/○○.jpg) no-repeat -533px 0px;
width: 267px;
}
/*------hover*/
ul#globalnavi li#menu1 a:hover{
background: transparent url(../images/○○.jpg) no-repeat 0px -51px;
}
ul#globalnavi li#menu2 a:hover{
background: transparent url(../images/○○.jpg) no-repeat -266px -51px;
}
ul#assets_globalnavi li#menu3 a:hover{
background: transparent url(../images/○○.jpg) no-repeat -533px -51px;
}

※○○.jpgは3つのBOXに入る各背景画像のa:linkとa:hoverの画像をひとつの画像として書き出した(6つのBOXの集まり)ものでwidth:800px,height:102pxの1枚画像です。

回答No.3

abril

>> ということは、子要素の何れか（提供されていない部分）でこの2コラムのfloatをクリアする様な指定があるのでしょう。
> ご指摘の通り、子要素が問題の原因でした。

やはりそうでしたか。

> floatをクリアするような指定ではないのですが、

あ、こちらは「子要素に”floatをクリアするような指定”が入っているから今回の不具合が起きている」という意味ではなく、提示されたソースだけなら本来起こる筈の「#wrapperの高さが失われ背景がレンダリングされなくなる」という不具合が起きていないのは「子要素に”floatをクリアするような指定”が入っているから」でしょう、という意味です。つまりこちらは逆に入っていないとまずいのですが、不具合が起きていないという現状から、現在のソースでは提供されていない部分でその点はOKになっているのでしょうね、という事ですので。

> 右カラム内にあった子要素のpaddingが関係していたようです。右カラム内で
> （省略）
> h2テキストの先頭を背景画像の関係で、2文字分くらい空けたかったので、padding-leftを指定していたのですが、

ボックスモデルの計算がそこでpadding-leftの値分、親要素#rightの幅680pxをオーバーしていたわけですね。その結果親要素の幅が伸びてしまった、という事の様ですね。
しかしちょっと気になるのが…

> ちなみに、今paddingを省いたので、float問題はクリアしたのですが、結局h2の先頭にちょっとスペースとりたいけど、とれないという別の問題が発生しました。（背景画像の▲とタイトル文字がかぶってる状態です）

ということなのですが、通常その様なスタイルを適用したい時は、現在質問者様が実践されている様に、背景画像を指定してそのサイズ＋α分の余白をpadding-leftで設ける、というのがごく自然ですので、よく使われる手法ですしそれで不具合も起きないのです。そこで考えられるのは、質問者様はもしかしてこのh2のスタイル自体にも、widthプロパティで値を指定されていたりしますか？
例えば、▲の画像（images/hoge.gif）のサイズを10px×10pxとし、画像から更に10px余白を空けてテキストを開始する場合：
h2 {
font-size: 12px;
padding-left: 20px;
background: url(images/hoge.gif) left center no-repeat;
}
この様な感じで指定されていると思いますが、上記の指定に加えて更に"width: 100%;"とか"width: 680px;"とか入っていませんか？（前者は親要素#rightの幅に対する100%ですから後者と同じ値になります）もし仮にその様な形で幅が指定されている場合、実際のh2の幅は680px＋20px＝700px、と解釈されてしまう場合があります（DOCTYPE・XML宣言の有無・UAに依存。このあたりの解釈の違いは　http://w3g.jp/others/data/doctype_switching　等を参考にしてみて下さい）。

で、解決方法なのですが、h2はそもそもブロック要素なので、widthプロパティで幅を明示しなくても自動的に親要素の幅を「継承」します。そして幅を明示していなければ、左右paddingの値もその自動的に取得した幅の中に含めて差し引きしてくれるので、padding-leftの値を設定しても不具合は出なくなる筈です。
ということで、h2のスタイルを改めて検証してみて下さい。

お礼

>h2はそもそもブロック要素なので、widthプロパティで幅を明示しなくても自動的に親要素の幅を「継承」します。
>ということで、h2のスタイルを改めて検証してみて下さい。

まさに、おっしゃる通りでした！！長方形の画像をh2の背景においていたので、ぴったりになるようwidth指定をしてしまっていました。気を利かせたつもりだったのですが、言われるように元々ブロック要素なのだから、余計なお世話だったのですね！！はあ～助かりました。本当に本当にありがとうございます！！

別のスレッドをたてたほうが良いかとも思ったのですが、abril様の的確なご指摘を見込んで最後にもう1つだけ・・・。
構造的にwrapperの上に下記のようなナビゲーションをおいているのですが、よくわからない問題がひとつありまして。。。

<ul id="globalnavi">
<li id="menu1"><a href="□□1.html"><span class="menu1title">メニュー1</span></a></li>
<li id="menu2"><a href="□□2.html"><span class="menu2title">メニュー2</span></a></li>
<li id="menu3"><a href="□□3.html"><span class="menu3title">メニュー3</span></a></li></ul>

menu1,menu2,menu3の各背景に各画像を配置し、それぞれ左にフロートさせて、3つのBOXが横並びに配置されているつくりになっています。そのうえにテキストでメニュータイトルをのせている、という形なのですが、なぜか「メニュー3」のテキストだけ繰り返されて2回表示されてしまいます。そしてその2個目の「メニュー3」テキストは<ul id="globalnavi">からはみだしてちょうどmenu1のボックスの下あたりに表示されている、という訳のわからない状態です。IE6でのみ発生しています。
こういうバグってご存知ですか？？それとも、また何か別の要素なのでしょうか？

□□□□□□□　　□□□□□□□　　□□□□□□□
□メニュー１□　　□メニュー２□　　□メニュー３□
□□□□□□□　　□□□□□□□　　□□□□□□□
メニュー3

↑↑↑↑↑↑こんな感じです。もちろん「メニュー3」を間違って2回入力してるというものではありません。。。

回答No.2

abril

> ちなみにDOCTYPEは以下の通りです。
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

そうですか…先程試した際、まさにこのDOCTYPE版もあったのですが、やはり不具合は起きないんですよね。

> #wrapperに高さの指定はしてないのですが、背景はレンダリングされています。

ということは、子要素の何れか（提供されていない部分）でこの2コラムのfloatをクリアする様な指定があるのでしょう。

> #wrapperは高さを指定しないとダメなんですね。知りませんでした。

いえ、高さは通常コンテンツ量に応じて成り行きになるのが自然ですので、指定はしなくて良いです（フッターの位置を固定する等、レイアウトによっては必要な場合もありますが、本件の様なシンプルな2コラムの場合は要りません）。むしろheightを固定値で指定することで内包する要素がはみ出したりという不具合が出ますので、注意が必要です。

> してなくてもレンダリングされていたのは、bodyにheight100%を指定していたからなのでしょうか？

いえ、それだけでは#wrapper自体には高さは発生しませんので関係ないですね。
本件の様な文書構造の場合、#wrapperは内包する子要素のコンテナブロック（#leftと#right）のボリュームに応じて自動的に高さが発生するのですが、#leftと#rightの両方がfloatが指定されて「浮いて」しまっているので、その状態では#wrapperは浮いている子要素を”ぶら下げる”様な形になりますので、結果として#wrapperの高さが無い、という状態になってしまうのです。IE6でそうならないのは、仕様にバグがある為です。

> 簡略化して検証してみますので、またご教授ください。

そうですね、私としてもどこに原因があるのか気になりますので引き続き何かありましたら補足して下さい。

お礼

はあ～～。。やっとわかりました。。。

>ということは、子要素の何れか（提供されていない部分）でこの2コラムのfloatをクリアする様な指定があるのでしょう。

ご指摘の通り、子要素が問題の原因でした。floatをクリアするような指定ではないのですが、右カラム内にあった子要素のpaddingが関係していたようです。右カラム内で
<h2>タイトル</h2>
<p>内容</p>
と、していたんですが、h2要素にCSSで背景画像（▲やじるしを90度回転させたもの）を指定していたんですね。で、h2テキストの先頭を背景画像の関係で、2文字分くらい空けたかったので、padding-leftを指定していたのですが、それが良くなかったようです。paddingをとってやると、右カラムが右へ仕様通りフロートし、右端へぴったり寄りました。おかげで左右段落の間に隙間が空きました。とりあえずよかったです。解決しました。ありがとうございました！！
ちなみに、今paddingを省いたので、float問題はクリアしたのですが、結局h2の先頭にちょっとスペースとりたいけど、とれないという別の問題が発生しました。（背景画像の▲とタイトル文字がかぶってる状態です）
なにか解決策はありますでしょうか？？すみません、何度も。

回答No.1

abril

> Firefox,safariなどでは、仕様通り左カラムは左に寄り、右カラムは右によるため、左右の段組みの間に20pxの空きが出るのですが、IE6だと左右の間に
> スペースはなく、かわりに右カラムの右(つまり、一番右）が空いてしまうのです。

提供されたソースをそのままコピペしてIE6上で表示して見た限りでは、他環境と同じ様に「仕様通り左カラムは左に寄り、右カラムは右に」寄っていますが。質問者様の様に2コラムの左を"float: left;"／右を"float: right;"で組んでいる場合は大概のモダンブラウザでは同じ結果になります。
DOCTYPEが不明ですが、とりあえず3種類ほど（HTML、XHTML、XML宣言付、等）で試して見ましたがいずれもご質問の様な不具合はおきません。

それから、

> floatを両方ともrightにして左カラムに右マージンorパディングを入れてみたのですが、今度はカラム落ちしてしまいます。

こちらはボックスモデルの計算方法の違いやらfloatの際におきるマージンが倍になるバグやらありますので、その為でしょう。

それぞれのコラムの子要素の方に原因（例えば子要素のどれかが親要素の幅を実は超えてしまっている）があるかもしれません。一度、HTML部分を（提供された部分だけの）大枠だけにしてダミーテキストを入れて、検証してみてはいかがでしょう？

ちなみに、IE6以外（Firefox等）ではこのままだと#wrapperが高さを持たないので#rightと#leftが2つともはみ出しています。（CSSで省略されている）#wrapperの背景がレンダリングされていない筈ですが？

お礼

ちなみにDOCTYPEは以下の通りです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

>一度、HTML部分を（提供された部分だけの）大枠だけにしてダミーテキストを入れて、検証してみてはいかがでしょう？

ちょっとやってみましたが、やっぱり右段組みも左寄せになってしまいますね。。。う～ん、もう少し内容を簡略化して検証してみます。

>ちなみに、IE6以外（Firefox等）ではこのままだと#wrapperが高さを持たないので#rightと#leftが2つともはみ出しています。（CSSで省略されている）#wrapperの背景がレンダリングされていない筈ですが？
#wapperに高さの指定はしてないのですが、背景はレンダリングされています。#wrapperは高さを指定しないとダメなんですね。知りませんでした。ちなみに今はheight100%を指定してみました。(してなくてもレンダリングされていたのは、bodyにheight100%を指定していたからなのでしょうか？)

簡略化して検証してみますので、またご教授ください。ありがとうございます。