※ ChatGPTを利用し、要約された質問です(原文:css: IEでsidebarが表示されない)
このQ&Aのポイント
cssで2カラムのページを左右を両方floatさせて作っています。
firefoxでは表示されるsidebarがIE7では表示されません。clearfixの問題かと思いclearfixを入れてみましたがうまくいきませんでした。
どうしたらよいかご存知の方がいたら教えてください。よろしくお願いします。
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;}
お礼
ご回答いただきありがとうございました。お礼が遅れてしまって申し訳ありません。 確かにposition:absoluteは必要ありませんでした。 container部分のposition: relativeにしていたのもfloatで解決できました。 ありがとうございました。