floatを使用すると中央寄せにならない

質問

CSSについて質問があります。
floatを使って2段組のレイアウトにしたのですが、
MacのIE5.2で見ると、floatを使ったdiv（container）だけ中央寄せではなく
左寄せになってしまいます。MacのSafariやFirefoxでは正常に見れました。

URL：http://fuma.xrea.jp/

/* CSSソース*/
html{height : 100%; width : 100%;}
body{width : 100%; text-align : center;
margin : 0px auto; padding : 0px;}

#container{
margin : 0px auto;
padding : 0px;
width : 720px;}

div#main{
text-align : left;
width : 490px;
margin : 0px;
padding : 8px 0px;
float : left;}

div#side{
margin : 0px;
padding-bottom : 8px;
text-align : left;
width : 230px;
float : right;}

div#copyright{
text-align : center;
margin : 0px auto;
padding : 10px 0px;
clear : both;
width : 720px;}

/* HTMLソース */
<div id="container">
<div id="side">てすと</div>
<div id="main">てすと</div>
</div>
<div id="copyright">test</div>

<div align="center">を使っても中央寄せになりませんでした。
どうすれば、MacのIEでも中央寄せにできますか？

回答No.2

abril · ベストアンサー

Mac OSX上で検証してみました。
質問文中のサンプルには記載されていませんでしたが、実際にhttp://fuma.xrea.jp/index.htmlから参照されているstyle.cssを確認したところ、どうも#containerに仕込まれている（所謂clearfix的）フロート解除の定義がMac版IE5.2に対しては上手く効いていないばかりでなく、レイアウト崩れの原因となってしまっている様です。
----------------------------------------------------------------------
【オリジナル】style.css
----------------------------------------------------------------------
#container{
overflow : hidden;
margin : 0px auto;
padding : 0px;
width : 720px;
background-image : url(image/bg2.gif);
}

#container:after {
content: "";
display: block;
clear: both;
height: 1px;
overflow: hidden;
}

/*\*/
* html #container {
height: 1em;
overflow: visible;
}
/**/
----------------------------------------------------------------------
上記の部分を以下の様に変更してみて下さい。削除がメインです。
----------------------------------------------------------------------
【修正版】style.css
----------------------------------------------------------------------
#container{
margin : 0px auto;
padding : 0px;
width : 720px;
background-image : url(image/bg2.gif);
}
----------------------------------------------------------------------
これだけにしてみて下さい。具体的な修正箇所は：
※#containerの定義から"overflow : hidden;"を削除
※#container:afterと/*\*/～/**/部分を全て削除

ここを変えただけで、#containerがセンタリングにならず左寄せになってしまっていた不具合は解消されました。IE5.2、Safari、Firefoxでほぼ同様の表示になります。Windows XP上の主なモダン・ブラウザでも特に問題はない様です。

これらの定義を削除しても、元々<div id="container">が閉じる直前にフロート解除の為の<br class="clear">が挿入されているので、コラム落ちはしません。
※本来はこの削除したclearfix的仕掛けが有効であれば、この<br class="clear">の方が不要となるのですが。

clearfixは、フロート解除の為に便利な技なのですが、環境やコンテンツの構成条件によってはそのままでは意図した通りの効果が反映されない場合がありますので、別のやり方のclearfix（zoomやinline-blockで定義する方法など、何パターンかの方法があります）に置き換えてみる（Mac版IE5.2上でも有効なケースもありますので）か、場合によっては使用せず、ベタなやり方ですが（この<br class="clear">の様な）"clear: both"を仕込んだ要素を挿入して解決する、という方法もあるでしょう（※個人的には<div>が閉じた後にデータもなく<br>が来ているのは論理構造上あまり適切ではないかと思いますので、<hr>などの方がベターかと。）。特に、今回質問者様が確認対象に入れてらっしゃるMac版IE5.2は非常に不具合の多いブラウザであり、しかもMicrosoftが既に開発中止をして何年も経つ様な存在ですので、これで他環境と同様にレイアウトをきちんと表示させるには、スマートではないコーディングや余計なCSSの定義を付加して対処をしなければならない場合が多く、やっかいな存在ですので…。

お礼

回答ありがとうございます。container:after以降を削除したら直りました。
container:afterは、containerの背景画像が
mainやsideでも見れるようにするために使ったのですが、
何故か削除しても見れるようになりました。ありがとうございました。

質問のほうには書いてませんが、
http://fuma.xrea.jp/template/rocketbbs/sample/catbbs.htmlの
記事表示部分も左寄せになってしまいます。
floatを使ってないのに、何故このような現象が起こるのでしょうか？

回答No.1

suzuko

「container」内で「side」「main」でfloatがされているのに、「clear : both;」で解除されず、次の「copyright」で解除されているためではないでしょうか？

ｈｔｍｌで
<div id="container">
<div id="side">てすと</div>
<div id="main">てすと</div>
<div id="copyright">test</div>
</div>

とされてはいかがでしょうか？

それとIE5.2の場合、確かwidthが「side」＋「maine」＜「container」でないとfloatがうまく表示されなかったはずです。

ご参考までに。

お礼

回答ありがとうございます。確かに、clearが上手くできてませんでした。また、widthが「side」＋「maine」=「container」でもうまく表示されました。