html - テーブルサイズをdivと同じにする

Question

これは私が尋ねるのは難しいです。要するに、私のdivが重なっています(テーブルの外に出ます)。divに従ってテーブルのサイズを調整したい。

フッターを追加しようとすると、コンテンツが重なってしまいます。コードは次のとおりです。

ここにページがあります:ページ

Answer 1

.middlecssクラスは、中央のコンテンツの高さをに設定します25px。したがって、フッターは左側のメニューテーブルコンテンツに関連して配置されます。cssクラスからを削除すると25px、divは期待どおりに機能するはずです。

Answer 2

わかりました。サイトがめちゃくちゃになっているので、サイトを書き直すことをお勧めします。まずは私のテンプレートを使用してください。

<div class="wrap">
<div class="header"></div>
<div class="body">
    <div class="left-side"></div>
    <div class="center"></div>
    <div class="right-side"></div>
</div>
<div class="footer"></div>
</div>​

そしてcss：

.wrap{
    width: 400px;
    height: 500px;
    margin: 0 auto;
}
.header{
    width: 100%;
    height: 50px;
    background-color: #dddddd;
}
.body{
    width: 100%;
    height: 350px;
}
.left-side{
    position: relative;
    float: left;
    width: 20%;
    height: 100%;
    background-color: #eeeeee;
}
.center{
    position: relative;
    float: left;
    width: 60%;
    height: 100%;
    background-color: #cccccc;
}
.right-side{
    position: relative;
    float: left;
    width: 20%;
    height: 100%;
    background-color: #eeeeee;
}
.footer{
    width: 100%;
    height: 100px;
    background-color: #dddddd;
}
​

これがjsFiddleの実例です

Answer 3

まあ、@ Arturas ..あなたのウェブサイトの@skmasqにちょっと同意します。tableレイアウトに使わない方が良いと思います。ただし、現在の Web サイトのソース コードを引き続き使用する場合は、.middleの高さプロパティを削除してみてください。25px固定に設定したのですが、内容がオーバーロードになっているため重な​​っています。