css: IEでsidebarが表示されない

質問

cssで2カラムのページを左右を両方floatさせて作っています。
firefoxでは表示されるsidebar（背景、画像、テキストを含むすべて）がIE7では表示されません。clearfixの問題かと思いclearfixを入れてみましたがうまくいきませんでした。
どうしたらよいかご存知の方がいたら教えてください。よろしくお願いします。

ちなみにCSSの主要部分は以下のとおりです。

/*--- container ---*/

#container {position: relative;
　　　　background:url(images/background.jpg) repeat-y;
width: 800px;
hight: 600px;
padding: 0;
margin-left: auto;
margin-right: auto;
text-align: left;
border: 0; }

/*--- header ---*/

#header {width: 800px;
height: 107px;
margin:0;}

/*--- side-bar ---*/

#side-bar{position:absolute;
background: transparent url(images/menu_bckgrnd.png) center center no-repeat;
width: 150px;
padding:0;
float:left;}
#side-bar ul { margin: 0;
padding: 50px 50px 50px 50px;
　　　ist-style: none;
　　　　　　　 width:30px;}
#side-bar li { margin: 0;
padding: 0;}
#side-bar li a{ display:block;}
#side-bar a:hover{position: relative;
top: 1px;
left: 1px;}

/*--- main-nav: content area ---*/

#main-nav {background: url(images/design.png) top left no-repeat;
width: 610px;
margin-top: 0 0 0 150px;
padding: 0 10px 0 30px;
float:right;}
#main-nav a:hover {position: relative;
top: 1px;
left: 1px; }
#content1{
float:left;
width:200px;
margin: 0 2px 20px -20px;
background:#fff;}
#content2{
float:left;
width:200px;
margin: 0 2px 20px 2px;
background:#fff;}
#content3{
float:left;
width:200px;
margin: 0 2px 20px 2px;
background:#fff;}

/*--- footer ---*/

#footer {width: 800px;
height: 100px;
background: transparent;
margin: -100px 0 0 0;
clear: both;
text-align:center;
padding-top:50px;}

/* -- clearfix -- */

.clearfix{ zoom:1; }
.clearfix:after{content:'.';
display:block;
visibility:hidden;
height:0;
clear:both;}

回答No.1

noname#119957 · ベストアンサー

違う方法で単純に、解決できます。
入れ子構造を明確に左右に分けます。

<#container>　: clear:both で問題はないです
　<#side-bar>　：position:absolute;は、不要でしょう。float:left
</div>
　<＃wrapper-right> :main-nav,content1をひとまとめにしてfloat:right
　　<#main-nav> : clear both </div>
　　<#content1> : clear both </div>
</div>
<#footer: clear:both </div>
</div>

position:absoluteは、ややこしいので、これをやめて、container内を左右に明確に振り分けて(#wrapper-right)、footerでclear:bothさせれば、解決すると思います。footerがcleat:bothでcontainaerの中に存在する限り背景は下まで表示されます。明確にfooterでclear:bothできるデザインでは、clearfixは不要です。

お礼

ご回答いただきありがとうございました。お礼が遅れてしまって申し訳ありません。

確かにposition:absoluteは必要ありませんでした。
container部分のposition: relativeにしていたのもfloatで解決できました。

ありがとうございました。