0
以下は、すべてが1つのコード、つまりhtmlとスタイルです。質問は、 "Box" divが "Footer" divに重なっている理由です。コードをコピーして貼り付けると、ブラウザーで自分自身で見ることができます。私はスタイルとdivのチェックを開始し、これまでのところ成功して自分自身を終了します。何か不足していますか？1つのdivの内容が別のdivに重なっていますか？
.shell { width:950px; margin:0; position:relative; }
#main { background:#f8f8f8 url(images/main.jpg) left top repeat-x; }
#main .box { float:left; width:306px; padding:0 19px 0 0; }
#main .shell { padding:25px 0; }
#footer { background:url(images/footer.jpg) left top repeat-x; color:#b3adad; padding:24px 4px; font-size:10px; }
#footer a { color:#b3adad; text-decoration:none; }
#footer a:hover { text-decoration:underline; }
#footer .footer-navigation { }
#footer .footer-navigation ul { list-style:none; }
#footer .footer-navigation ul li { float:left; padding-right:8px; margin-right:8px; border-right:1px solid #b3adad; height:10px; line-height:10px; }
#footer .footer-navigation ul li.last { padding-right:0; margin-right:0; border-right:0; }
#footer .footer-navigation ul li a { }
#footer .right { float:right; font-family:Verdana, Arial, Sans-Serif; }
#footer .right a { color:#dad7d7; font-weight:bold; text-decoration:underline; }
#footer .right a:hover { text-decoration:none; }
.box { float:left; width:306px; padding:0 19px 0 0; }
.last-box { padding-right:0; }
.box .entry { height:217px; padding-left:2px; }
.box .big-image { padding:4px 0 10px 0; }
.box .big-image img { border:2px solid #fff; }
.box .buttons .button,
.box .buttons .button span { background:url(images/main-button.jpg) repeat-x; height:29px; line-height:29px; float:right; display:inline; border:1px solid #bfbebe; padding:0 8px; }
.box .buttons .button span { float:left; border:0; background:url(images/main-button-span.jpg) left top no-repeat; padding:0 0 0 7px; } \t \t \t<div id="main">
<div class="shell">
\t <div class="box">
\t <h2 style="color:#565656;">Latest News</h2> \t \t \t
\t <div class="entry">
\t \t <div class="news">
\t \t newsstring;
\t \t </div>
\t </div>
\t </div> \t \t
\t <div class="box">
\t </div>
</div> \t
</div>
<!-- End of Main -->
<!-- Footer -->
<div id="footer">
<div class="shell">
\t <div class="footer-navigation">
\t <ul>
\t \t <li><a href="index.php">Home</a></li>
\t \t <li><a href="about.html">About</a></li>
\t \t <li><a href="Gallery.html">Gallery</a></li>
\t \t <li><a href="location.html">Location</a></li>
\t \t <li class="last"><a href="contact.html">Contact</a></li>
\t </ul>
\t </div>
\t <div class="container">
\t <table align="center" border="0" cellpadding="0" cellspacing="0" style="height:10px; width:1000px">
\t \t <tbody>
\t \t <tr>
\t \t \t <td style="height:75px; text-align:center; vertical-align:middle; width:560px">
\t \t \t <p><a href="#" target="_blank"><img alt="Seertech Solutions Pvt. Ltd" src="./css/images/seertechbanner.jpg" style="height:55px; width:660px" /></a></p>
\t \t \t </td>
\t \t </tr>
\t \t </tbody>
\t </table>
\t </div>
</div>
</div>
単なる浮動小数点問題です。 google "clearfix"を使って、それを使ってフローティング要素を含む親コンテナにclearfixクラスを追加することができます。以下の短い答え。 – Gezzasa