※ ChatGPTを利用し、要約された質問です（原文：IEとFireFoxでCSSの見た目をそろえたい）
IEとFireFoxでCSSの見た目をそろえたい
このQ&Aのポイント
CSSの素人が2カラムスタイルのデザインを作る際に、IEとFireFoxで見た目が違う問題に直面しています。
足し算は正しく行っているが、どこを修正すればいいのか分からない。
問題のコードはHTMLとCSSがあり、要素の幅や背景色などが設定されています。
CSSの素人ですがボックスを使って2カラムスタイルのデザインを作ろうとしているのですが
完成したのをみるとIEとFireFoxで見た目変わりうまく調整できずに困っています。
足し算はあっているはずなのですがどこを修正すればよいのでしょうか？
HTML
<body>
<div id="wrapper">
<div id="container">
<div class="header">
<h1> </h1>
</div>
<div class="kaijyo"></div>
<div class="main">
<div></div>
<h2> </h2>
<div class="kaijyo"></div>
<div class="line">
<hr>
</div>
</div>
<div class="menu"> </div>
<div class="kaijyo"></div>
<div class="footer">
<p> </p>
</div>
</div>
</div>
</body>
CSS
#wrapper{
text-align:center; /*IE対応*/
}
#container {
width: 980px;
margin-left:auto;
margin-right:auto;
background-color:#CAB59B;
text-align:left;
}
.header{
width: 970px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 10px;
background-color:#6F0011;
color:#000000;
text-align:left;
height:20px;
}
.main{
width: 670px;
float: left;
margin: 0px 0px 0px 0px;
padding: 10px 15px 10px 15px;
background-color:#E4E4E4;
text-align:left;
}
.menu{
width: 260px;
float: left;
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;
background-color:#CAB59B;
text-align:left;
}
.footer{
width: 970px;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 10px;
background-color:#6F0011;
color:#FFFFFF;
text-align:left;
}
.kaijyo{
clear: left;
}
お礼
DOCTYPEを変えるだけで正しく動くなんてびっくりです。 今までは呪文のように書いていただけでした。 ありがとうございます。