※ ChatGPTを利用し、要約された質問です（原文：フルCSSでFirefoxでデザインが崩れてしまいます。）
フルCSSでFirefoxでデザインが崩れてしまう原因と解決方法
このQ&Aのポイント
フルCSSでFirefoxでデザインが崩れてしまう問題が発生しています。FirefoxやOperaでは「contents」内のコンテンツが「container」を突き抜けて表示されてしまいます。
HTMLとCSSのコードを確認すると、「contents」要素が適切に配置されておらず、ブラウザの問題ではなくコードの問題であることが分かります。
この問題を解決するためには、「contents」要素の書き方を修正し、適切に配置する必要があります。また、ブラウザのバージョンも最新版を使用することが推奨されます。
フルCSSでFirefoxでデザインが崩れてしまいます。
フルcssHPに挑戦しようと思っています。
cssでIEでは思ったような表示が可能ですが
Firefox、Operaでは「contents」内のコンテンツが
「container」>を突き抜けて表示されてしまいます。
下記がhtml、cssソースになります。
【HTML】
<body>
<div id="container">
<!--メインナビ-->
<div id="contents">
<div id="subnavi">
<ul>
<li>サブナビ1</li>
<li>サブナビ2</li>
<li>サブナビ3</li>
<li>サブナビ4</li>
</ul>
</div>
<div id="main">
メインコンテンツが入ります
</div>
</div>
<!--フッター-->
</div>
</body>
メインナビ、フッターアンカーリンクは文字数制限上削除しています。
【CSS】
body{
text-align:center;
background-color:#ffffff;
font-size:10px;
color:#333333;
}
body div {
text-align:left;
margin: 0 auto;
}
#container{
text-align:left;
width:724px;
background-color:#ffffff;
padding:15px 18px;
position: relative;
border:1px solid #666;
}
#contents{
width:724px;
background-color:#ffffff;
text-align:left;
border-bottom:8px solid #666666;
margin-bottom:10px;
position: relative;
clear:both;
}
#subnavi{
float:left;
width:200px;
}
#main{
float:left;
width:495px;
padding-left:29px;
}
この突き抜けを防止するにはどうしたらよろしいのでしょうか。
「contents」
を削除して表示するとどのブラウザでも表示が可能ですので
<div id="contents">の記述が何かおかしいのでしょうか。
それとも根本的にブラウザの問題なのでしょうか？
(ブラウザは最新版を使っています)
皆様、よろしくご回答お願いいたします。
お礼
ありがとうございます！！ 即解消されました！！！ 感謝です！！