borderをページの下まで伸ばしたい

解決済

質問者：nanaringo
質問日時：2009/12/12 13:55
回答数：1件

お世話になります。既出の質問を見たのですが、解決できず質問させていただきます。
テーブルを使い左右にレイアウトを分けています。
左のメニュー部分の上下両サイドにborderを設定していますが、メニュー部分の方が圧倒的にメインよりコンテンツが少なく、ページの途中でborderが途切れてしまいます。
メインコンテンツの縦量に合わせて下まで伸びて欲しいのですが、どうすればいいのでしょうか？

恐れ入りますが下記ソースです。
/*CSS*/
body {
margin: 0px auto;
padding: 0px;
height:100%;
width: 760px;
text-align:center;
position:relative;
}
#header {
padding:0px ;
margin: 0px auto;
width: 760px;
height: auto;
}
#contents {
margin: 0px auto;
padding: 0px;
height:100%;
width: 760px;
background-color:#FFFFFF
}
.side{/*メニュー部分*/
margin:0px;
padding:0px 0px 20px;
border:1px #666666 solid ;
width:163px;
height:auto;
}
.footer {/*フッターの背景画像サイズに合わせheightを設定*/
margin:0px;
padding:10px;
width: 760px;
height:72px;
text-align:left;
background-image:url(image/bottom.gif);
background-repeat:no-repeat;
border:0px;
}
.coretable{/*画面レイアウト左右分けテーブル*/
margin:5px 0px 0px;
padding:0px;
width:760px;
}


<body>
<div id="header">
ヘッダー内容
</div>
<div id="contents">
<table border="0" cellpadding="0" cellspacing="0" class="coretable">
<tr><td width="165" align="center" valign="top">
<div class="side">
メニュー内容
</div>
</td>
<td width="595" align="center" valign="top">
メインコンテンツ内容
</td>
</tr>
</table>
</div>

<div id="footer">
フッター内容
</div>
</body>
</html>

あるサイトで拝見して、
.sideに
height:100%;/* for IE6 */
min-height:100%;
を加え、
html{ height:100%; }
body{ height:100%;}
としてみたところ、borderは伸びず、footerがページの途中に上がってきてしまうという現象でした。
テーブルを使っているのが悪いのでしょうか？

どうかお知恵をお貸し下さい。