※ ChatGPTを利用し、要約された質問です（原文：CSSで2コラムを枠で囲みたいがWinIEだと上手くいかない）
CSSで2コラムを枠で囲む方法
このQ&Aのポイント
CSSを使用して2コラムを枠で囲む方法について、WinIEではうまく動作しない現象が発生しています。解決方法を教えてください。
WinIEで2コラムを枠で囲むCSSのソースコードを記述しましたが、期待通りの動作をしません。改善策をお知らせください。
CSSを使用して2コラムを枠で囲むためのコードを書いたところ、WinIEでは正しく表示されません。解決方法を教えてください。
CSSで2コラムを枠で囲みたいがWinIEだと上手くいかない
下記のようなソースを書いてみたのですが、
WinIE だとうまくいきません。
なにか良い方法があれば教えてください。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>枠で囲む</title>
<style type="text/css">
<!--
.waku {padding:10px 40px 0px 40px;}
.box {
border: solid red 1px;
padding: 15px 20px 0px 20px;
vertical-align: top;
}
.box div#R {
float: left;
width: 400px;
}
.box div#L {
float: right;
width: 250px;
}
.box div#L#map {
float:left;
padding-top: 20px;
}
.box strong {color: blue;}
.box p {
width: 400px;
border-bottom: 1px solid #000000;
}
-->
</style>
</head>
<body leftmargin="0" topmargin="0">
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" class="waku"><div class="box">
<div id="R"><strong>【コラムA】</strong><br>
<p>果物</p>
<ul>
<li>リンゴ</li>
<li>バナナ</li>
<li>いちご</li>
</ul>
<p>野菜</p>
<ul>
<li>白菜</li>
<li>大根</li>
<li>ごぼう</li>
</ul>
</div>
<div id="L"><strong>【コラムＢ】</strong><br>
<div id="map">ここに写真が入る予定</div>
</div>
<br style="clear: both">
</div></td>
</tr>
</table>
</body>
</html>
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
できました！回答ありがとうございます。 しかしこれだと縁ぴったりになり、外側の余白がなくなりますよね。 外側の余白を保ちつつ枠で囲むということはできないのでしょうか。。 でもなぜこうだといけるのか理解できれば、その方法も思いつけるかもしれません。 今回はありがとうございました。