ブラウザ間のCSSの表示違いにつきまして

質問

現在、趣味のホームページを作成しているのですが、IEでは意図したとおり表示されるのですが、firefoxではCONTENT内上部（float boxの上）に隙間のようなものができてしまって困っています・・・

CSSは以下になります。
#content {
width: 680px;
margin: 0 10px;
padding: 0;
background-image: url(../img/content-back.jpg);
background-repeat: repeat-y;
text-align: center;
overflow: auto;
text-align: center;
}
#left {
float: left;
width: 456px;
margin: 0;
padding: 50px 0;
text-align: center;
}
#right {
float: right;
width: 224px;
margin: 0;
padding: 50px 0;
background-color: #000000;
text-align: center;
}
#footer {
height: 60px;
margin: 0 10px;
padding: 0;
background-image: url(../img/footer-back.jpg);
background-repeat: repeat-x;
text-align: center;
clear: both;
}

CONTENTを親要素として、その中にleftとrightボックスを作成しました。
なお、overflow: auto;をなくしてcontent・left・rightに高さを指定したら隙間はなくなるのですが、共に内容に準じた高さ（auto）にしたくて・・・

どなたか解る方いらしたらご教示お願いします！

回答No.1

noname#83877 · ベストアンサー

overflow:hidden;を指定すればよいのでは？

お礼

ご回答ありがとうございます！
contentをoverflow: hidden;にしたのですが、
動きはありませんでした・・・

補足

ご回答かりがとうございます！
contentをoverflow: hidden;にしたのですが、
動きはありませんでした・・・